/* Welcome、Play 與婚禮頁的版面。顏色、字級、按鈕、常見問題沿用 site.css；
   Welcome 的互動示範外殼在 welcome-demos.css，這裡只把它們調成深色頁面上的樣子。 */

/* ---------------------------------------------------------------- 首屏 */

.pg-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.5vw, 80px); min-height: 100dvh; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 56px; }
.pg-hero h1 { margin-top: 20px; font: 900 clamp(2.3rem, 4.6vw, 4.2rem)/1.14 var(--display); letter-spacing: -.02em; }
.pg-lede { margin-top: 20px; max-width: 30em; font-size: clamp(1rem, 1.25vw, 1.1875rem); color: var(--mist); }
.pg-price { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: .9375rem; color: var(--mist); }
.pg-price b { margin-left: 10px; font: 700 1.25rem var(--display); color: var(--pip); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 區塊 */

.pg-sec { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.pg-head h2 { margin-top: 18px; }
.pg-sub { margin-top: clamp(48px, 6vw, 80px); font-size: 1.5rem; }
.pg-text { margin-top: 8px; max-width: 36em; color: var(--mist); }

.pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.pg-steps li { display: flex; gap: 20px; }
.pg-steps p { margin-top: 6px; color: var(--mist); }

.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 80px); margin-top: clamp(48px, 6vw, 80px); }
.pg-split .pg-sub { margin-top: 0; }
.pg-split-even { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.pg-motions { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--mist); }
.pg-motions b { margin-right: 6px; color: var(--pip); }

.pg-card, .pg-needs, .pg-modes > div { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }

/* 簽名牆主題：四欄，第 1 張和第 6 張是大圖（一左一右），其餘的小圖會自己補進大圖旁邊的空位。點了開燈箱。
   2 張大圖加 16 張小圖剛好排滿；張數變了要重算，不然最後一排會缺。 */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; margin-top: 40px; }
.theme-card { position: relative; display: block; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); aspect-ratio: 1568 / 744; background: var(--sc-panel); cursor: zoom-in; }
.theme-card:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.theme-card:nth-child(6) { grid-column: 3 / span 2; grid-row: span 2; aspect-ratio: auto; }
.theme-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.theme-card:hover img { transform: scale(1.05); }
.theme-card__cap { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-tag); background: rgb(15 16 23 / .72); font-size: .8125rem; color: var(--pip); }

.pg-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pg-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pg-card h3 span { font-size: .8125rem; font-weight: 500; color: var(--mist); }
.pg-card p { margin-top: 6px; font-size: .9375rem; color: var(--mist); }
.pg-dots { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: .9375rem; }
.pg-dots li { display: inline-flex; align-items: center; gap: 8px; }
.pg-dots li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgb(255 255 255 / .16); }

.pg-spec { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.pg-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pg-facts div:last-child { border-bottom: 1px solid var(--line); }
.pg-facts dt { font-size: .9375rem; color: var(--mist); }
.pg-needs ul { display: grid; gap: 10px; margin-top: 14px; color: var(--mist); }
.pg-needs li { position: relative; padding-left: 18px; }
.pg-needs li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--glow); }

.pg-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pg-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); }
.pg-shots figcaption { margin-top: 12px; font-weight: 700; }
.pg-shots em { margin-left: 10px; font-style: normal; font-weight: 400; font-size: .875rem; color: var(--mist); }

.pg-table { margin-top: 28px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.pg-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9375rem; }
.pg-table th, .pg-table td { padding: 12px 20px; text-align: left; }
.pg-table thead th { font-size: .8125rem; font-weight: 500; color: var(--mist); background: var(--face); }
.pg-table tbody tr { border-top: 1px solid var(--line); }
.pg-table tbody th { font-weight: 700; white-space: nowrap; }
.pg-table td { color: var(--mist); }

.pg-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg-modes .is-default { border-color: var(--glow); }
.pg-modes span { font-size: .75rem; color: var(--glow); }
.pg-modes h4 { margin: 8px 0 4px; font: 700 1.0625rem/1.4 var(--display); }
.pg-modes p { font-size: .9375rem; color: var(--mist); }

.pg-cta { padding-block: clamp(72px, 9vw, 136px); border-top: 1px solid var(--line); text-align: center; }
.pg-cta .pg-lede { margin-inline: auto; }
.pg-cta .hero-cta { justify-content: center; }

/* ---------------------------------------------------------------- Play：遊戲目錄 */

.cat-jump { display: flex; gap: 8px; margin-top: 32px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
.cat-jump::-webkit-scrollbar { display: none; }
.cat-jump .tab { text-decoration: none; }
.cat { margin-top: clamp(48px, 6vw, 80px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.cat-head h3 { font-size: 1.5rem; }
.cat-head p { margin-top: 6px; max-width: 38em; color: var(--mist); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 32px 18px; margin-top: 24px; }
.game h4 { margin-top: 14px; font: 700 1.0625rem/1.4 var(--display); }
.game-how { margin-top: 4px; font-size: .9375rem; color: var(--mist); }
.pg-included { margin-top: 28px; color: var(--mist); }
.pg-included b { color: var(--pip); font-weight: 500; }

/* ---------------------------------------------------------------- 婚禮頁 */

/* 首屏右邊：簽名牆在現場的樣子，右下角壓一張拍立得牆，兩面牆一眼看到。 */
.wd-visual { position: relative; padding: 0 6% 12% 0; }
.wd-visual .hero-screen img { width: 100%; }
/* 現場的照片接近正方形，裁成 5:4 才不會把第一屏撐太高；上下各裁掉一點天花板和地板。 */
.wd-visual .hero-screen.is-photo img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 42%; }
.wd-cap { margin-top: 12px; font-size: .8125rem; color: var(--mist); }
.wd-photo { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line-2); border-radius: var(--r-ctl); box-shadow: 0 30px 60px -20px rgb(8 8 14 / .8); rotate: 3deg; }
/* 兩面牆：一張畫面、一句話、三個重點，細節連到 Welcome 頁。 */
.wd-walls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
/* 只剩一面牆上架的時候（main.js 掛 is-single）：一張卡片佔整排，圖在左、字在右。 */
.wd-walls.is-single { grid-template-columns: 1fr; }
.wd-walls.is-single .wd-wall { flex-direction: row; }
.wd-walls.is-single .wd-wall > img { width: 54%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
.wd-walls.is-single .wd-wall-text { justify-content: center; padding: clamp(24px, 3vw, 44px); }
.wd-walls.is-single .wd-wall .link { margin-top: 0; }
.wd-wall { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.wd-wall > img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid var(--line); }
.wd-wall-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 20px; }
.wd-wall-text > p { margin-top: 6px; color: var(--mist); }
.wd-points { display: grid; gap: 10px; margin: 18px 0 16px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--mist); }
.wd-points li { position: relative; padding-left: 18px; }
.wd-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--glow); }
.wd-wall .link { margin-top: auto; }
/* 婚禮頁的簽名牆主題：七張，前三張大（一排三張），後四張小（一排四張）。 */
.wd-themes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 12px; margin-top: 28px; }
.wd-theme { grid-column: span 3; text-decoration: none; }
.wd-theme:nth-child(-n + 3) { grid-column: span 4; }
.wd-theme:nth-child(n + 4) span { font-size: .9375rem; }
.wd-theme:nth-child(n + 4) em { display: block; margin: 2px 0 0; }
.wd-theme img { width: 100%; aspect-ratio: 1568 / 744; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--sc-panel); transition: border-color .3s var(--ease); }
.wd-theme:hover img { border-color: var(--glow); }
.wd-theme span { display: block; margin-top: 12px; font-weight: 700; }
.wd-theme em { margin-left: 10px; font-style: normal; font-weight: 400; font-size: .875rem; color: var(--mist); }
/* 真實婚禮的那段影片：跟旁邊的卡片一樣的框。 */
.wd-clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
/* 實際的婚禮現場是第一屏下面那一區（2026-10-15 搬上來的）：一開始就是說明和影片，不用 .pg-split 平常的上邊距。 */
.wd-real > .pg-split:first-child { margin-top: 0; }
/* 加選的遊戲只列四支，一排。 */
.wd-games { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.wd-more { margin-top: 20px; }
/* 婚禮頁主標「婚禮簽到板，簽完就上大螢幕。」第二行有 8 個字，用一般首屏的字級在電腦上會斷成三行，這裡小一號。 */
.pg-hero h1.wd-title { font-size: clamp(2.3rem, 4vw, 3.6rem); }
/* 婚禮遊戲區的客製題庫（2026-10-16）：緊接在第一句下面，標題亮一點，讓人一眼看到題目能換成新人的故事。 */
.wd-story { margin-top: 20px; max-width: 36em; color: var(--mist); }
.wd-story b { display: block; margin-bottom: 2px; font: 700 1.125rem/1.4 var(--display); color: var(--pip); }

/* ---------------------------------------------------------------- Welcome：示範外殼放到深色頁面上 */

.page-welcome canvas { display: block; max-width: 100%; }
/* 舊站把所有按鈕的底色、外框、內距都歸零，示範裡的按鈕是照那個前提寫的。用 :where 不加權重，才不會蓋掉它們自己的樣式。 */
:where(.page-welcome) button:where(.chip, .pad__btn, .phone__chip, .phone__send, .lightbox__btn, .lightbox__close) { padding: 0; border: 0; background: none; }
/* 示範外殼的重點色跟著頁面走：平常這一頁站在婚禮那一邊是粉色，從活動那一邊來的是紫色（main.js）。 */
.page-welcome { --lux: var(--glow); --lux-soft: var(--glow-soft); }
.page-welcome .led { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux) 16%, transparent), 0 0 12px color-mix(in srgb, var(--lux) 70%, transparent); }
.page-welcome .chip { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--mist); }
.page-welcome .chip:hover { background: var(--face); color: var(--pip); }
.page-welcome .chip.is-active { background: var(--pip); box-shadow: none; color: var(--night); }
.page-welcome .chip em, .page-welcome .chip.is-active em { color: inherit; opacity: .6; }
/* 簽名板和手機裡是淺色畫面：舊站的字色是從深色的內文繼承來的，這裡要自己給。 */
.page-welcome .pad, .page-welcome .phone { color: var(--ink); }
/* 拍立得牆的示範在舊站是放在窄欄裡的；整欄寬會比一個畫面還高，所以限寬置中。 */
.page-welcome .iw { max-width: 940px; margin: clamp(40px, 5vw, 64px) auto 0; }
.lab__grid { margin-top: clamp(40px, 5vw, 64px); }

/* ---------------------------------------------------------------- 窄螢幕 */

@media (max-width: 900px) {
  .pg-hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: calc(var(--nav-h) + 36px); }
  .pg-split, .pg-split-even, .pg-spec, .pg-steps, .pg-groups, .pg-modes, .pg-shots { grid-template-columns: 1fr; }
  .wd-walls { grid-template-columns: 1fr; }
  .wd-walls.is-single .wd-wall { flex-direction: column; }
  .wd-walls.is-single .wd-wall > img { width: 100%; aspect-ratio: 2 / 1; border-right: 0; border-bottom: 1px solid var(--line); }
  .wd-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-theme:nth-child(n) { grid-column: auto; }
  .wd-theme:nth-child(-n + 3) { grid-column: 1 / -1; }
  .wd-theme:nth-child(n) em { display: block; margin: 2px 0 0; }
  .wd-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 婚禮現場的三張照片：左右滑，只佔一張的高度，露出下一張的邊讓人知道還有。滑進來的那幾張不做捲動進場。 */
  .wd-real .pg-shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .wd-real .pg-shots::-webkit-scrollbar { display: none; }
  .wd-real .pg-shots figure { scroll-snap-align: start; }
  .js .wd-real .pg-shots [data-reveal] { opacity: 1; translate: none; }
  .wd-visual { padding-right: 4%; }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-card:first-child, .theme-card:nth-child(6) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1568 / 744; }
  .pg-facts div { grid-template-columns: 6em 1fr; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 12px; }
}