/* ROLL6 首頁與 ROLL6 Events 選購頁。
   品牌只有一個樣子：暗色底，只亮一面的骰子。整頁鎖深色，不跟著系統切淺色。
   顏色：光點（紫）是唯一的重點色；特典（琥珀）只給 Keep，品牌設定裡它本來就留給收藏品。
   婚禮頁把光點換成粉色（2026-10-12，見下面的 .page-wedding）：一頁還是只有一個重點色。
   圓角：卡片 22、控制項 16、標籤 8，跟遊戲本體的 token 一樣。
   層級：nav 50 ｜ 手機版總價列 40 ｜ toast 70 ｜ 報價單走瀏覽器的 top layer。 */

:root {
  color-scheme: dark;
  --night: #15161E;
  --face: #1D1F2A;
  --face-2: #242735;
  --line: #303346;
  --line-2: #454965;
  --glow: #A08CFF;
  --glow-soft: #CFC6FF;
  --pip: #EFEDFB;
  --mist: #9295AB;
  --spark: #FFC266;
  --display: "Unbounded", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-card: 22px;
  --r-ctl: 16px;
  --r-tag: 8px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 68px;
  --gutter: clamp(20px, 4vw, 56px);

  /* 配置圖：深色版 */
  --sc-floor: #20222F;
  --sc-foyer: #1A1C27;
  --sc-grid: #2D3043;
  --sc-line: #454965;
  --sc-line-2: #6A6F92;
  --sc-wall-l: #181922;
  --sc-wall-r: #1D1F2B;
  --sc-top: #353952;
  --sc-side-a: #2B2E42;
  --sc-side-b: #232537;
  --sc-panel: #0F1017;
  --sc-table-top: #3B3F5A;
  --sc-table-side: #2A2D41;
  --sc-fig: #A3A6C0;
  --sc-fig-staff: #EFEDFB;
  --sc-light: #A08CFF;
  --sc-ink: #EFEDFB;
  --sc-tone-0: #A08CFF;
  --sc-tone-1: #7C80A6;
  --sc-tone-2: #4B4F73;
  --sc-route: #CFC6FF;
  --sc-dim: #9295AB;
  --sc-text: #EFEDFB;
  --sc-text-dim: #9295AB;
  --sc-zone: #8386A8;
  --sc-halo: #181922;
}

/* 婚禮的重點色是粉色：按鈕、小標、骰子、光暈、配置圖上的光都跟著換。
   掛 .page-wedding 的：婚禮頁（/wedding/）、婚禮的選購頁（/wedding/plan/）和 Welcome 頁，都寫在 <body>；共用的頁面站在婚禮那一邊時 main.js 也會掛上。其他頁是紫色；
   首頁那張去婚禮頁的卡片（.door-wedding）也用這一組，所以卡片裡的字和按鈕是粉色的。
   Logo 是圖檔，用的是 assets/brand/ 裡檔名帶 -pink 的那幾個（下面三行把圖換掉）；這裡的粉色換了，那幾個檔也要跟著換。 */
.page-wedding, .door-wedding { --glow: #FF8FB6; --glow-soft: #FFC6DA; --sc-light: #FF8FB6; --sc-tone-0: #FF8FB6; --sc-route: #FFC6DA; }
.page-wedding .nav-logo-full, .page-wedding .foot img { content: url("../brand/roll6-lockup-on-dark-pink.svg"); }
.page-wedding .nav-logo-icon { content: url("../brand/roll6-icon-pink.svg"); }
.page-wedding .paper-head img { content: url("../brand/roll6-lockup-on-light-pink.svg"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--pip); font: 400 1rem/1.75 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--glow-soft); outline-offset: 3px; }
::selection { background: var(--glow); color: var(--night); }

.wrap { width: min(1320px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 不要從中間斷開的一小段，例如「×2／×3」。 */
.nowrap { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.mono { font-family: var(--mono); letter-spacing: .06em; }
.top-mark { position: absolute; top: 0; height: 24px; width: 1px; }

h2 { font: 900 clamp(1.9rem, 3.6vw, 3.1rem)/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; }
h3 { font: 700 1.2rem/1.4 var(--display); }
.eyebrow { font: 500 .8rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--glow); }
.note { font-size: .875rem; line-height: 1.6; color: var(--mist); }
/* 把兩樣東西接起來的「+」（簽名牆 + 拍立得牆）：細一點、暗一點，兩邊的名詞才跳得出來。不寫「加」（2026-10-15）。 */
.plus { margin-inline: .3em; font-weight: 400; color: var(--mist); }
.die { width: 40px; height: 40px; flex: none; }
.die-body { fill: var(--glow); }
.die-pip { fill: var(--night); }

/* ---------------------------------------------------------------- 按鈕 */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 1.5em; border: 1.5px solid transparent; border-radius: var(--r-ctl); font: 700 1rem/1 var(--body); text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-s { min-height: 42px; padding: 0 1.1em; font-size: .9375rem; }
.btn-primary { background: var(--glow); color: var(--night); }
.btn-primary:hover { background: var(--glow-soft); }
.btn-ghost { border-color: var(--line-2); color: var(--pip); }
.btn-ghost:hover { border-color: var(--pip); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn .icon { transition: transform .25s var(--ease); }
a.btn-primary:hover .icon { transform: translateX(3px); }
.round { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: var(--r-ctl); background: none; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.round:hover { border-color: var(--pip); background: var(--face); }
.round:active { transform: scale(.94); }
.link { display: inline-flex; align-items: center; gap: .45em; padding: 6px 0; border: 0; background: none; color: var(--glow-soft); font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- 導覽 */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.nav.is-stuck { background: rgb(21 22 30 / .86); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 100%; }
.nav-logo img { height: 34px; width: auto; }
/* 導覽列只有三樣：Logo、場合的切換、一顆按鈕（2026-10-12）。
   切換是兩顆：「活動」去 /events/（遊戲為主），「婚禮」去 /wedding/（迎賓為主）；人在哪一邊，那一顆是亮的，首頁和共用的頁面兩顆都不亮。
   遊戲和迎賓互動的連結不在這裡：它們是「要看有哪些」的時候才看的，放在各自的銷售頁裡和頁尾。
   東西少到手機上也排得下，所以沒有選單鈕。 */
.nav-seg { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); }
.nav-seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 12px; color: var(--mist); font: 500 .9375rem/1 var(--body); text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.nav-seg a:hover { color: var(--pip); }
.nav-seg a[aria-current] { background: var(--pip); color: var(--night); }
.nav-logo-icon { display: none; }

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

/* 首頁（/）只做分流：一句問句，下面兩張一樣大的卡片，活動和婚禮各去各的銷售頁。
   整張卡片是一個連結，裡面那顆只是長得像按鈕。婚禮那一張用婚禮的粉色（.door-wedding，變數寫在最上面）。 */
.lead { display: grid; align-content: center; min-height: min(100dvh, 900px); padding-top: calc(var(--nav-h) + 24px); padding-bottom: clamp(40px, 6vw, 72px); }
.lead h1 { margin-top: 18px; font: 900 clamp(2rem, 4.2vw, 3.6rem)/1.16 var(--display); letter-spacing: -.02em; }
/* 一句話底下那一行分流的問題（2026-10-16 以前它就是主標）。 */
.lead-ask { margin-top: 14px; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--mist); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.door { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); color: inherit; text-decoration: none; transition: border-color .3s, translate .5s var(--ease); }
.door:hover { border-color: var(--glow); translate: 0 -4px; }
.door img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1px solid var(--line); }
/* 婚禮那張是真的婚禮照片（4:3），裁成扁的時候往上一點：留住牆上的簽名和新人的名字，少一點西裝和頭紗。 */
.door-wedding img { object-position: 50% 35%; }
.door-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; }
.door-kind { font: 500 .8125rem/1.6 var(--body); letter-spacing: .1em; color: var(--glow); }
.door h2 { margin-top: 8px; font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.35 var(--display); letter-spacing: 0; }
.door-text > p:not([class]) { margin-top: 6px; font-size: .9375rem; color: var(--mist); }
.door-from { margin-top: 14px; font-size: .9375rem; color: var(--mist); }
.door-from b { margin-right: 4px; font: 700 1.125rem var(--display); color: var(--pip); font-variant-numeric: tabular-nums; }
.door .btn { margin-top: auto; min-height: 46px; }
.door-from + .btn { margin-top: 18px; }
.door:hover .btn .icon { transform: translateX(3px); }

/* 活動頁（/events/）第一屏就是 Play：左邊一句話、起價和按鈕，右邊一面大螢幕和兩支手機。 */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4.5vw, 80px); min-height: min(100dvh, 880px); padding-top: calc(var(--nav-h) + 20px); padding-bottom: clamp(48px, 7vw, 96px); }
.hero h1 { margin-top: 20px; font: 900 clamp(2.3rem, 4.6vw, 4.2rem)/1.14 var(--display); letter-spacing: -.02em; }
.hero-sub { margin-top: 24px; max-width: 28em; font-size: clamp(1rem, 1.25vw, 1.1875rem); color: var(--mist); }
/* 起價從 plan-data 帶（main.js），跟 Play 頁第一屏是同一個數字。 */
.hero-price { margin-top: 24px; font-size: .9375rem; color: var(--mist); }
.hero-price b { margin-right: 12px; font: 700 1.25rem var(--display); color: var(--pip); font-variant-numeric: tabular-nums; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-visual { position: relative; padding: 0 4% 13% 7%; }
.hero-screen { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--glow) 42%, transparent), 0 0 0 8px rgb(29 31 42 / .6); }
/* 手機是實體的東西，圓角照手機的樣子，不算在卡片的 22 裡。 */
.hero-phone { position: absolute; bottom: 0; width: 23%; border: 1px solid var(--line-2); border-radius: 12% / 6.8%; box-shadow: 0 30px 60px -20px rgb(8 8 14 / .8); }
.hero-phone-a { left: 0; rotate: -7deg; }
.hero-phone-b { right: 6%; width: 19%; bottom: 3%; rotate: 6deg; }

/* ---------------------------------------------------------------- 主張 */

.claim { padding-block: clamp(40px, 6vw, 96px) clamp(72px, 11vw, 168px); }
.claim h2 { font-size: clamp(1.9rem, 4.7vw, 4.2rem); line-height: 1.22; color: var(--mist); }
.claim h2 strong { color: var(--pip); font-weight: inherit; }
.claim-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 5vw, 80px); margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); color: var(--mist); }
.claim-facts b { display: block; margin-bottom: 4px; font: 700 1.25rem/1.4 var(--display); color: var(--pip); }
/* 兩種賽制加分隊（2026-10-16）：一顆骰子、一行標題、一段說明，跟「怎麼玩」的三步同一個長相，下面再接 .claim-facts。 */
.claim-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 72px); }
.claim-modes li { display: flex; gap: 20px; }
.claim-modes p { margin-top: 6px; color: var(--mist); }

/* ---------------------------------------------------------------- 不想玩、不會玩 */

.easy { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.easy h2 { margin-top: 18px; }
.easy-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 56px); }
.easy-list li { padding-top: 20px; border-top: 1px solid var(--line); }
.easy-list p { margin-top: 6px; color: var(--mist); }

/* ---------------------------------------------------------------- 怎麼玩 */

.how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 104px); padding-block: clamp(56px, 8vw, 120px); }
.how-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 22px); width: min(100%, 580px); padding-bottom: 40px; }
.how-phones img { width: 100%; border: 1px solid var(--line); border-radius: 12% / 6.8%; }
.how-phones img:nth-child(3n + 2) { translate: 0 40px; }
.how-steps { display: grid; gap: 30px; margin-top: 40px; }
.how-steps li { display: flex; gap: 20px; }
.how-steps p { margin-top: 6px; color: var(--mist); }

/* ---------------------------------------------------------------- 實際試玩 */

/* 活動頁的工作室試玩（2026-10-16）：一段廣角的搶地盤、一段拔刀的手機特寫，兩段一樣高。
   欄寬照影片的比例算（16:9 和 5:6），兩段才會一樣高：16/9 ÷ 5/6 ≈ 2.13。 */
.playtest { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.playtest-head h2 { margin-top: 18px; }
.playtest-head > p:last-child { margin-top: 16px; max-width: 34em; color: var(--mist); font-size: 1.0625rem; }
.playtest-grid { display: grid; grid-template-columns: minmax(0, 2.13fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.playtest-grid video { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.playtest-grid figcaption { margin-top: 12px; font-weight: 700; }
.playtest-grid em { display: block; margin-top: 2px; font-style: normal; font-weight: 400; font-size: .875rem; color: var(--mist); }

/* ---------------------------------------------------------------- 遊戲 */

.games { padding-block: clamp(56px, 8vw, 120px); }
.games-tabs { display: flex; gap: 8px; margin-top: 32px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.games-tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: none; color: var(--mist); font-weight: 500; white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.tab span { font: 500 .75rem var(--mono); opacity: .7; }
.tab:hover { color: var(--pip); border-color: var(--line-2); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--pip); border-color: var(--pip); color: var(--night); }
.games-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; min-height: 48px; }
.games-bar p { color: var(--mist); max-width: 38em; }
.games-more { margin-top: 4px; }
.rail-steps { display: flex; gap: 8px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 23vw, 328px); gap: 18px; margin-top: 24px; padding: 4px max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))) 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.game { scroll-snap-align: start; }
.game img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); transition: transform .5s var(--ease), border-color .3s; }
.game:hover img { transform: translateY(-4px); border-color: var(--line-2); }
.game h3 { margin-top: 14px; font-size: 1.0625rem; }
.game p { display: flex; gap: 14px; margin-top: 2px; font-size: .875rem; color: var(--mist); }
.game p span { color: var(--glow-soft); }

/* ---------------------------------------------------------------- 一整場 */

.show { padding-block: clamp(56px, 8vw, 120px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.cell { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.cell img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.cell-text { padding: 22px 24px 26px; }
.cell-text p { margin-top: 6px; color: var(--mist); font-size: .9375rem; }
/* 三排，寬窄交錯：7＋5、5＋7、7＋5。寬的那一格圖片維持 16:9，窄的那一格圖片填滿剩下的高度。 */
.cell-teams, .cell-knockout, .cell-score { grid-column: span 7; }
.cell-practice, .cell-quiz, .cell-console { grid-column: span 5; }
.cell-practice img, .cell-quiz img { flex: 1 1 0; height: 0; min-height: 150px; aspect-ratio: auto; }
.cell-quiz img { object-position: left top; }
.cell-console { background: radial-gradient(130% 120% at 100% 0%, rgb(160 140 255 / .3), transparent 62%), var(--face); }
/* 中控台是手機畫面：直的，放在漸層上像一支從卡片裡升起來的手機。高度跟著同一列的卡片走。 */
.cell-console img { flex: 1 1 0; align-self: center; width: auto; max-width: calc(100% - 48px); height: 0; min-height: 240px; margin-top: 28px; aspect-ratio: auto; object-fit: cover; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 20px 20px 0 0; }
.cell-console .cell-text { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- ROLL6 Events */

.events { padding-top: calc(var(--nav-h) + 16px); background: linear-gradient(180deg, #181922, var(--night) 520px); }
.tease-head h2 { margin-top: 18px; }
.tease-head p:last-child { margin-top: 16px; max-width: 34em; color: var(--mist); font-size: 1.0625rem; }

/* 首頁的入口：一張會換場合的配置圖，下面是三段體驗和進選購頁的按鈕。 */
.tease { padding-block: clamp(64px, 9vw, 136px); border-top: 1px solid var(--line); background: linear-gradient(180deg, #181922, var(--night) 520px); }
.tease-sheet { position: relative; height: clamp(360px, 54vw, 660px); margin-top: clamp(28px, 4vw, 48px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: #181922; }
.tease-scene { position: absolute; inset: 0; }
.tease-chips { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.tease-chips .tab { min-height: 40px; background: rgb(21 22 30 / .72); }
.tease-chips .tab[aria-pressed="true"] { background: var(--pip); }
.tease-caption { position: absolute; inset: auto 20px 16px; font-size: .875rem; color: var(--mist); }
.tease-foot { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; }
.tease-foot .flow { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tease-foot .btn { min-height: 0; padding-inline: 2em; }
.planner { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) auto; gap: clamp(20px, 3.2vw, 56px); align-items: start; }

.preview { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - var(--nav-h) - 32px); min-height: 520px; max-height: 900px; }
.sheet { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: #181922; }
.sheet-scene { position: absolute; inset: 0; }
.sheet-bar { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: .8125rem; line-height: 1.4; color: var(--mist); pointer-events: none; }
.sheet-bar b { margin-right: 12px; color: var(--pip); font-weight: 700; }
.sheet-bar .mono { font-size: .75rem; }
.sheet-bar-foot { inset: auto 0 0; }
/* 節目單：選了哪幾支遊戲，直接排在配置圖的左上角。 */
.bill { position: absolute; top: 46px; left: 16px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: rgb(21 22 30 / .84); font-size: .75rem; color: var(--mist); }
.bill b { margin-left: 6px; font: 500 .75rem var(--mono); color: var(--pip); }
.bill ol { display: flex; gap: 4px; }
.bill img { width: 44px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.bill-more { display: grid; place-items: center; min-width: 30px; font: 500 .75rem var(--mono); color: var(--pip); }

.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.flow li { position: relative; display: grid; gap: 1px; padding: 12px 18px 14px; font-size: .875rem; line-height: 1.45; transition: opacity .3s; }
.flow li + li { border-left: 1px solid var(--line); }
.flow li + li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--face); rotate: 45deg; translate: 0 -50%; }
.flow-when { font-size: .75rem; color: var(--mist); }
.flow b { font: 700 .9375rem var(--display); color: var(--glow); }
.flow [data-flow-text] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow li.is-off { opacity: .45; }
/* 選購頁的流程列（is-seq）：一開始只有 Play 一格，字置中；走到迎賓那一區，Welcome 才從左邊出現，走到 Keep 那一區，Keep 才從右邊出現（configurator.js 加減 is-gone）。
   格子收起來是把寬度縮到零；裡面的字先淡掉，才不會在縮的時候擠成一團。字一直置中，格子變窄的時候它跟著平移，不會跳。 */
.flow.is-seq { display: flex; }
.flow.is-seq li { flex: 1 1 0; min-width: 0; justify-items: center; text-align: center; transition: flex-grow .5s var(--ease), padding .5s var(--ease), opacity .3s; }
.flow.is-seq li > * { max-width: 100%; white-space: nowrap; transition: opacity .3s .2s; }
.flow.is-seq li.is-gone { flex-grow: 0; padding-inline: 0; border-left-width: 0; overflow: hidden; }
.flow.is-seq li.is-gone > * { opacity: 0; transition: opacity .15s; }
.flow.is-seq li.is-gone + li { border-left-width: 0; }
.flow.is-seq li.is-gone + li::before { display: none; }
/* 婚禮沒排遊戲時收起來的是中間那一格：兩邊的格子之間還是要有那條線。 */
.flow.is-seq li:not(.is-gone) + li.is-gone + li { border-left-width: 1px; }
.flow.is-seq li:not(.is-gone) + li.is-gone + li::before { display: block; }
/* 買的人是先挑遊戲，再往前往後加：核心那一段的小字亮起來。 */
.flow li.is-core .flow-when { color: var(--glow-soft); }
.flow li.is-off b { color: var(--mist); }

.tally { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.tally > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 14px; }
.tally-label { grid-column: 1 / -1; font-size: .75rem; color: var(--mist); }
.tally-total { font: 800 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--display); font-variant-numeric: tabular-nums; }
.tally-head { font-size: .8125rem; color: var(--mist); }
.draft { margin-left: 8px; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: var(--r-tag); font: 500 .6875rem/1.4 var(--body); color: var(--mist); }

/* 一次只看一個區塊：每一區跟畫面一樣高，內容置中，所以看不到下一區的設定。
   捲動會吸附到每一區的開頭；區塊比畫面高的時候，裡面照常捲。 */
html.snap { scroll-snap-type: y mandatory; }
.snap [data-block], .snap .faq { scroll-snap-align: start; }
.snap .foot { scroll-snap-align: end; }
.block { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - var(--nav-h) - 32px); padding-block: 16px; }
.block-in { transition: opacity .45s; }
.snap .block:not(.is-current) .block-in { opacity: .2; }
.block h1 { margin: 16px 0 clamp(22px, 4.5vh, 48px); font: 900 clamp(1.9rem, 3.3vw, 3rem)/1.18 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .9375rem; font-weight: 500; color: var(--mist); }
.kicker .die { width: 30px; height: 30px; }
.kicker b { font: 700 1rem var(--display); color: var(--glow); }
.legend { display: block; margin-bottom: 16px; font: 700 clamp(1.25rem, 1.9vw, 1.6rem)/1.4 var(--display); letter-spacing: 0; text-wrap: wrap; }
.block .note { margin-top: 10px; }
.block .note + .note { margin-top: 2px; }

/* 右邊的進度：六顆，目前那一區是亮的，點了就過去。 */
.progress { position: sticky; top: 50dvh; display: grid; gap: 8px; translate: 0 -50%; }
.progress button { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--line-2); border-radius: var(--r-tag); background: var(--night); color: var(--mist); font: 500 .75rem var(--display); transition: background-color .25s, border-color .25s, color .25s; }
.progress button b { position: absolute; right: calc(100% + 10px); top: 50%; padding: 4px 10px; border-radius: var(--r-tag); background: var(--face-2); color: var(--pip); font: 500 .8125rem var(--body); white-space: nowrap; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity .2s; }
.progress button:hover { border-color: var(--pip); color: var(--pip); }
.progress button:hover b, .progress button:focus-visible b { opacity: 1; }
.progress button[aria-current] { background: var(--glow); border-color: var(--glow); color: var(--night); }

.opts { display: grid; gap: 10px; }
.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.opt:hover { border-color: var(--line-2); background: rgb(29 31 42 / .6); }
.opt:active { transform: scale(.992); }
.opt:has(input:checked) { border-color: var(--glow); background: var(--face); }
.opt:has(input:focus-visible) { outline: 2px solid var(--glow-soft); outline-offset: 3px; }
/* 多選：方的記號，沒選時是「＋」，選了變勾。 */
.opt-mark { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 3px; border: 1.5px solid var(--line-2); border-radius: var(--r-tag); color: var(--mist); transition: background-color .2s, border-color .2s, color .2s; }
.opt-mark .icon { grid-area: 1 / 1; width: 14px; height: 14px; }
.opt-mark .icon + .icon, .opt:has(input:checked) .opt-mark .icon:first-child { display: none; }
.opt:has(input:checked) .opt-mark .icon + .icon { display: block; }
.opt:has(input:checked) .opt-mark { background: var(--glow); border-color: var(--glow); color: var(--night); }
/* 單選：圓的選鈕（選鈕本來就是圓的，不算在 22／16／8 的圓角裡），而且整組連成一張清單，一看就知道只能挑一個。 */
.opt:has(input[type="radio"]) .opt-mark { border-radius: 50%; }
.opt:has(input[type="radio"]) .opt-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--night); scale: 0; transition: scale .2s var(--ease); }
.opt:has(input[type="radio"]:checked) .opt-mark::after { scale: 1; }
.opts.is-single { gap: 1px; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--line); }
.opts.is-single .opt { padding-block: 13px; border: 0; border-radius: 0; background: var(--night); }
.opts.is-single .opt:hover { background: #1A1B25; }
.opts.is-single .opt:has(input:checked) { background: var(--face); box-shadow: inset 3px 0 0 var(--glow); }
.opts.is-single .opt:has(input:focus-visible) { outline-offset: -3px; }
.opts-add { margin-top: 12px; }
/* 區塊裡的第二個問題（迎賓畫面、加租設備）：小一號的標題。 */
.sub-legend { margin: 24px 0 12px; font: 700 1.0625rem/1.5 var(--body); }
.sub-legend .hint { margin-top: 1px; }
/* 加租的設備：三張小卡排一排，價格放在說明下面。 */
.opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-3 .opt { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 2px 10px; }
.opts-3 .opt-price { grid-column: 2; padding-top: 4px; }
/* 一排連在一起的小選項：單選，跟清單一樣是「連在一起只能挑一個」。 */
.seg { display: flex; gap: 1px; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--line); }
.seg-lead { display: grid; place-items: center; padding: 0 14px; background: var(--face); font-size: .8125rem; color: var(--mist); white-space: nowrap; }
.seg-opt { flex: 1 1 0; display: grid; gap: 1px; padding: 8px 6px 9px; background: var(--night); text-align: center; cursor: pointer; transition: background-color .2s; }
/* 迎賓的每一項：卡片選了之後，下面接一排它自己的畫面選項，上下黏成一張。 */
.pack.is-on .opt { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pack .seg { border-color: var(--glow); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.seg-opt:hover { background: #1A1B25; }
.seg-opt:has(input:checked) { background: var(--face); box-shadow: inset 0 -3px 0 var(--glow); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--glow-soft); outline-offset: -3px; }
.seg-name { font-weight: 700; font-size: .9375rem; }
.seg-price { font: 500 .75rem/1.5 var(--mono); color: var(--mist); white-space: nowrap; }
.hint { float: right; margin: 5px 0 0 12px; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: var(--r-tag); font: 500 .75rem/1.6 var(--body); color: var(--mist); }
.hint.is-multi { border-style: dashed; }
.skip { display: inline-flex; align-items: center; min-height: 40px; margin-top: 12px; padding: 0 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r-ctl); background: none; font-size: .875rem; color: var(--mist); transition: border-color .2s, color .2s; }
.skip:hover { border-color: var(--pip); color: var(--pip); }
.skip[aria-pressed="true"] { border-style: solid; border-color: var(--line); color: var(--pip); cursor: default; }
.opt-name { display: block; font-weight: 700; }
.opt-desc { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.6; color: var(--mist); }
.opt-price { padding-top: 2px; font: 500 .8125rem/1.7 var(--mono); color: var(--pip); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 選項附一張小圖（婚禮選購頁的兩面牆）。 */
.opt.has-thumb { grid-template-columns: auto 96px minmax(0, 1fr) auto; }
.opt-thumb { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-tag); }
/* 加選比單獨訂便宜：原價劃掉，放在新價格前面。 */
.opt-price s, .line-amount s { margin-right: 8px; font-weight: 400; color: var(--mist); }
.opt.is-disabled { opacity: .45; cursor: not-allowed; }
.opts-2 .opt { grid-template-columns: auto minmax(0, 1fr); }
.opts-2 .opt-price { display: none; }

.guests { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.guests-out { font: 800 clamp(2.6rem, 4.4vw, 3.6rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.guests-out small { margin-left: 8px; font: 500 1rem var(--body); color: var(--mist); }
.guests-note { padding-bottom: 6px; font-size: .875rem; color: var(--mist); }
.range { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 28px; margin-top: 14px; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--glow) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--glow); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 5px solid var(--glow); border-radius: 50%; background: var(--night); transition: scale .2s var(--ease); }
.range::-moz-range-thumb { width: 16px; height: 16px; border: 5px solid var(--glow); border-radius: 50%; background: var(--night); }
.range:active::-webkit-slider-thumb { scale: 1.12; }
.range-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: .75rem; color: var(--mist); }
/* 有排桌的場合：每桌幾人、一共幾桌，兩支小一號的滑桿。 */
.tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 36px); margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.sub { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.sub label { font-size: .9375rem; color: var(--mist); }
.sub output { font: 700 1.125rem var(--display); font-variant-numeric: tabular-nums; }
.sub .range { grid-column: 1 / -1; margin-top: 6px; }
.range-s::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border-width: 4px; }

/* 遊戲目錄的入口：放在選數量的清單正下方。 */
.book-open { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 12px 18px 12px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-ctl); background: none; text-align: left; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.book-open:hover { border-color: var(--pip); background: var(--face); }
.book-open:active { transform: scale(.992); }
.book-thumbs { display: flex; }
.book-thumbs:empty { display: none; }
.book-thumbs img { width: 62px; aspect-ratio: 16 / 9; object-fit: cover; border: 1.5px solid var(--night); border-radius: var(--r-tag); }
.book-thumbs img + img { margin-left: -24px; }
.book-open-text { flex: 1; padding-left: 4px; }
.book-open-text b { display: block; }
.book-open-text small { font-size: .875rem; color: var(--mist); }
.book-open .icon { color: var(--mist); transition: transform .25s var(--ease), color .2s; }
.book-open:hover .icon { transform: translateX(3px); color: var(--pip); }

/* 遊戲目錄（另外一頁）：每一支一張畫面、名稱、一句玩法，直接勾。沒勾的圖壓暗一點，勾了才亮。 */
.book { width: min(1180px, calc(100vw - 24px)); height: calc(100dvh - 24px); max-height: none; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--night); color: var(--pip); overflow: auto; }
.book::backdrop { background: rgb(9 9 14 / .74); backdrop-filter: blur(6px); }
.book-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 16px 20px 16px 28px; border-bottom: 1px solid var(--line); background: rgb(21 22 30 / .95); }
.book-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-right: auto; }
.book-title h2 { font: 700 1.25rem var(--display); letter-spacing: 0; }
.book-tiers { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--mist); }
.book-tiers li { display: flex; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-tag); transition: border-color .25s, background-color .25s, color .25s; }
.book-tiers b { font: 500 .8125rem var(--mono); }
.book-tiers li[aria-current] { border-color: var(--glow); background: var(--face); color: var(--pip); }
.book .link { flex: none; white-space: nowrap; }
.book .games-tabs { flex-wrap: wrap; margin: 0; padding: 18px 28px 0; overflow: visible; }
.book .tab { min-height: 38px; padding: 0 12px; font-size: .875rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 28px 18px; padding: 22px 28px 44px; }
.pick { display: block; cursor: pointer; }
.pick-shot { position: relative; display: block; overflow: hidden; border: 1.5px solid var(--line); border-radius: var(--r-ctl); transition: border-color .2s, transform .2s var(--ease); }
.pick-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .58; transition: opacity .25s; }
.pick:hover .pick-shot { border-color: var(--line-2); }
.pick:hover .pick-shot img, .pick:has(input:checked) .pick-shot img { opacity: 1; }
.pick:has(input:checked) .pick-shot { border-color: var(--glow); }
.pick:has(input:focus-visible) .pick-shot { outline: 2px solid var(--glow-soft); outline-offset: 3px; }
.pick:active .pick-shot { transform: scale(.98); }
.pick-mark { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--pip); border-radius: var(--r-tag); background: rgb(21 22 30 / .62); color: var(--pip); transition: background-color .2s, border-color .2s, color .2s; }
.pick-mark .icon { grid-area: 1 / 1; width: 14px; height: 14px; }
.pick-mark .icon + .icon, .pick:has(input:checked) .pick-mark .icon:first-child { display: none; }
.pick:has(input:checked) .pick-mark .icon + .icon { display: block; }
.pick:has(input:checked) .pick-mark { background: var(--glow); border-color: var(--glow); color: var(--night); }
.pick-name { display: block; margin-top: 10px; font-weight: 700; line-height: 1.4; }
.pick-how { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.55; color: var(--mist); }
.pick-meta { display: flex; gap: 12px; margin-top: 4px; font-size: .8125rem; color: var(--mist); }
.pick-meta span { color: var(--glow-soft); }

.quote-box { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.quote-box h2 { font: 700 1.125rem var(--display); letter-spacing: 0; }
.lines { margin-top: 12px; }
/* 第一欄放得下「Welcome 迎賓」一行（2026-10-16 加中文）。 */
.lines li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; }
.lines li + li { border-top: 1px solid var(--line); }
.line-group { font: 500 .75rem/2 var(--mono); letter-spacing: .06em; color: var(--mist); }
.line-label small { margin-left: 10px; font-size: .8125rem; color: var(--mist); }
.line-amount { font: 500 .9375rem/1.9 var(--mono); font-variant-numeric: tabular-nums; }
.lines .line-empty { display: block; color: var(--mist); }
.sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.sum strong { font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1.2 var(--display); font-variant-numeric: tabular-nums; }
.sum small { grid-column: 1 / -1; justify-self: end; font-size: .875rem; color: var(--mist); }
.quote-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 10px; }
.quote-cta .btn { flex: 1 1 200px; }

/* ---------------------------------------------------------------- 配置圖 */

.scene { display: block; width: 100%; height: 100%; }
.sc-floor { fill: var(--sc-floor); }
.sc-foyer { fill: var(--sc-foyer); }
.sc-grid { stroke: var(--sc-grid); stroke-width: 1; }
.sc-divide { stroke: var(--sc-line); stroke-width: 1.2; stroke-dasharray: 5 5; }
.sc-wall-l { fill: var(--sc-wall-l); }
.sc-wall-r { fill: var(--sc-wall-r); }
.sc-edge, .sc-outline { fill: none; stroke: var(--sc-line); stroke-width: 1.2; stroke-linejoin: round; }
.sc-top { fill: var(--sc-top); }
.sc-side-a { fill: var(--sc-side-a); }
.sc-side-b { fill: var(--sc-side-b); }
.sc-panel.sc-side-a { fill: var(--sc-panel); stroke: var(--sc-line-2); stroke-width: 1; }
.sc-table-top { fill: var(--sc-table-top); }
.sc-table-side { fill: var(--sc-table-side); }
.sc-fig { fill: var(--sc-fig); }
.sc-fig-staff { fill: var(--sc-fig-staff); }
.sc-phone { fill: var(--sc-light); }
.sc-phone-halo { fill: var(--sc-light); opacity: .26; }
.sc-bezel { fill: var(--sc-panel); }
.sc-screen-rim { fill: none; stroke: var(--sc-light); stroke-width: 1; opacity: .7; }
.sc-post { stroke: var(--sc-line-2); stroke-width: 1.5; }
.sc-tablet { fill: var(--sc-fig-staff); }
.sc-ink, .sc-ink-glow { fill: none; stroke: var(--sc-ink); stroke-width: .035px; stroke-linecap: round; }
.sc-ink-glow { stroke: var(--sc-light); }
.sc-photo { fill: var(--sc-ink); }
.sc-tone-0 { fill: var(--sc-tone-0); }
.sc-tone-1 { fill: var(--sc-tone-1); }
.sc-tone-2 { fill: var(--sc-tone-2); }
.sc-route { fill: none; stroke: var(--sc-route); stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.sc-arrow { fill: var(--sc-route); }
.sc-door { stroke: var(--sc-route); stroke-width: 3; }
.sc-dim { stroke: var(--sc-dim); stroke-width: 1; }
.sc-dim-end { fill: var(--sc-dim); }
.sc-dim-text { fill: var(--sc-dim); font: 500 10.5px var(--mono); letter-spacing: .08em; }
.sc-leader { stroke: var(--sc-text); stroke-width: 1; opacity: .7; }
.sc-leader-end { fill: var(--sc-text); }
/* 標註的字後面墊一圈底色，壓在人和桌子上也讀得到。 */
.sc-name, .sc-spec, .sc-dim-text { paint-order: stroke; stroke: var(--sc-halo); stroke-width: 4px; stroke-linejoin: round; }
.sc-name { fill: var(--sc-text); font: 700 12px var(--body); }
.sc-spec { fill: var(--sc-text-dim); font: 500 9.5px var(--mono); letter-spacing: .04em; }
.sc-door-text { fill: var(--sc-route); }
.sc-label.is-venue .sc-name { fill: var(--sc-text-dim); font-weight: 500; }
.sc-label.is-venue .sc-leader { opacity: .35; }
.sc-label.is-venue .sc-leader-end { fill: var(--sc-text-dim); }
.sc-truss { stroke: var(--sc-line-2); stroke-width: 2.2; stroke-linecap: square; }
.sc-cloth, .sc-cloth.sc-side-a { fill: var(--sc-panel); stroke: var(--sc-ink); stroke-width: 1.4; }
.sc-beam { fill: var(--sc-ink); opacity: .11; }
.sc-led-img.is-projected { opacity: .88; }
.sc-screen-off { fill: var(--sc-panel); stroke: var(--sc-line); stroke-width: 1; }
.sc-led-wing { fill: var(--sc-panel); }
.sc-speaker.sc-top { fill: var(--sc-line); }
.sc-speaker.sc-side-a { fill: var(--sc-panel); }
.sc-speaker.sc-side-b { fill: color-mix(in srgb, var(--sc-panel) 78%, var(--sc-line)); }
.sc-gift-0.sc-top { fill: var(--sc-tone-0); }
.sc-gift-0.sc-side-a { fill: color-mix(in srgb, var(--sc-tone-0) 74%, #000); }
.sc-gift-0.sc-side-b { fill: color-mix(in srgb, var(--sc-tone-0) 58%, #000); }
.sc-gift-1.sc-top { fill: var(--sc-tone-1); }
.sc-gift-1.sc-side-a { fill: color-mix(in srgb, var(--sc-tone-1) 74%, #000); }
.sc-gift-1.sc-side-b { fill: color-mix(in srgb, var(--sc-tone-1) 58%, #000); }
.sc-gift-2.sc-top { fill: var(--sc-ink); }
.sc-gift-2.sc-side-a { fill: color-mix(in srgb, var(--sc-ink) 74%, #000); }
.sc-gift-2.sc-side-b { fill: color-mix(in srgb, var(--sc-ink) 58%, #000); }
.sc-product-top { fill: var(--sc-tone-0); }
.sc-product-side { fill: color-mix(in srgb, var(--sc-tone-0) 62%, #000); }
.sc-carpet { fill: var(--sc-light); opacity: .17; }
.sc-arch { fill: none; stroke: var(--sc-fig-staff); stroke-width: 2.2; stroke-linecap: round; }
.sc-row { fill: var(--sc-top); opacity: .55; }
.sc-ping { fill: none; stroke: var(--sc-light); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-zone { fill: var(--sc-zone); font: 500 10.5px var(--mono); letter-spacing: .14em; }
.sc-glow-a { stop-color: var(--sc-light); stop-opacity: .3; }
.sc-glow-b { stop-color: var(--sc-light); stop-opacity: 0; }

/* ---------------------------------------------------------------- 現成方案 */

/* 活動頁和婚禮頁的方案卡（2026-10-15）：名稱、一句話、總價、包含什麼，最下面一顆進選購頁的按鈕。
   用 flex 不用三欄的 grid：婚禮頁的拍立得牆在後台下架時只剩兩張，兩張也要排滿一排。 */
.packs { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.packs-head h2 { margin-top: 18px; }
.packs-head > p:last-child { margin-top: 16px; max-width: 34em; color: var(--mist); font-size: 1.0625rem; }
.pack-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.pack-sizes > span { margin-right: 6px; font-size: .9375rem; color: var(--mist); }
.pack-list { display: flex; gap: 18px; margin-top: clamp(24px, 3vw, 36px); }
.pack { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; padding: 28px 24px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--face); }
.pack h3 { font-size: 1.375rem; }
.pack-pitch { margin-top: 6px; color: var(--mist); }
.pack-price { margin-top: 22px; }
.pack-price b { font: 700 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.pack-price small { display: block; margin-top: 6px; font-size: .8125rem; color: var(--mist); }
.pack-points { display: grid; gap: 10px; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--mist); }
.pack-points li { position: relative; padding-left: 18px; }
.pack-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--glow); }
.pack .btn { margin-top: auto; }
.packs-note { margin-top: 20px; max-width: 48em; font-size: .9375rem; color: var(--mist); }
.packs-note a { color: var(--glow-soft); text-underline-offset: 4px; }

/* ---------------------------------------------------------------- 下一步 */

/* 常設空間還沒開賣，首頁只留一段話和去 Spaces 頁的連結。欄寬跟上面的常見問題一樣，標題才對得齊。 */
.next { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: end; gap: 20px clamp(24px, 5vw, 80px); padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.next h2 { margin-top: 18px; }
.next-copy p { max-width: 34em; color: var(--mist); }
.next-copy .link { margin-top: 12px; }

/* ---------------------------------------------------------------- 常見問題 */

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.faq h2 { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 1.0625rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--mist); transition: rotate .3s var(--ease); }
.faq details[open] summary .icon { rotate: 180deg; }
.faq details p { max-width: 40em; padding: 0 44px 24px 0; color: var(--mist); }

/* ---------------------------------------------------------------- 收尾與頁尾 */

.closing { position: relative; display: grid; place-items: center; overflow: hidden; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(72px, 9vw, 136px); text-align: center; }
.closing-loop { width: min(880px, 100%); mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 96%); mask-image: radial-gradient(closest-side, #000 52%, transparent 96%); }
.closing-copy { margin-top: -5%; }
.closing h2 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
.closing .hero-cta { justify-content: center; margin-top: 32px; }
.foot { border-top: 1px solid var(--line); padding-block: 36px 44px; color: var(--mist); font-size: .875rem; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.foot img { height: 30px; width: auto; }
/* 頁尾第一排右邊是站內其他頁面的連結（遊戲、迎賓互動原本在導覽列，搬到這裡），第二排是聯絡方式。 */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-left: auto; }
.foot-links a { color: var(--pip); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.foot-meta { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 4px 24px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--mono); letter-spacing: .04em; }

/* ---------------------------------------------------------------- 報價單 */

.quote { width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--face); color: var(--pip); overflow: auto; }
.quote::backdrop { background: rgb(9 9 14 / .74); backdrop-filter: blur(6px); }
.quote-tools { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--line); background: var(--face); }
.quote-tools p { margin-right: auto; font-size: .875rem; color: var(--mist); }

/* 紙本配色：報價單要印出來、要往上呈，所以是白紙黑字，配置圖也跟著換成淺色版。 */
.paper {
  --ink: #1B1C26; --ink-2: #5F6174; --rule: #D9D8E3;
  --sc-floor: #EFEEF5; --sc-foyer: #E5E4EE; --sc-grid: #D6D5E2; --sc-line: #9D9FB8; --sc-line-2: #7F819B;
  --sc-wall-l: #DAD9E6; --sc-wall-r: #E4E3EE; --sc-top: #CDCBDD; --sc-side-a: #B9B7CD; --sc-side-b: #A9A7BF;
  --sc-panel: #24253A; --sc-table-top: #C9C7DA; --sc-table-side: #AEACC4; --sc-fig: #2B2C3B; --sc-fig-staff: #5B3FD9;
  --sc-light: #6B4EE6; --sc-ink: #F4F3FA; --sc-tone-0: #8E79F2; --sc-tone-1: #8D90AE; --sc-tone-2: #5A5D7C;
  --sc-route: #5B3FD9; --sc-dim: #5F6174; --sc-text: #1B1C26; --sc-text-dim: #5F6174; --sc-zone: #6E7089; --sc-halo: #F7F6FB;
  margin: 16px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-tag); background: #FCFCFA; color: var(--ink); font-size: .9375rem; line-height: 1.6;
}
/* 婚禮的報價單：白紙上的粉色要深一點才讀得到。 */
.page-wedding .paper { --sc-fig-staff: #C2336D; --sc-light: #D94C86; --sc-tone-0: #EE7FA8; --sc-route: #C2336D; }
.paper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.paper-head img { width: 148px; }
.paper-head > div { text-align: right; }
.paper-head h2 { font: 700 1.375rem/1.3 var(--body); letter-spacing: 0; }
.paper-head p { font-size: .8125rem; color: var(--ink-2); }
.paper-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.paper-meta dt, .paper-fields label { font-size: .75rem; color: var(--ink-2); }
.paper-meta dd { font-weight: 700; }
.paper-meta div:first-child dd { font-family: var(--mono); font-weight: 500; }
.paper-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.paper-fields input { display: block; width: 100%; height: 34px; margin-top: 2px; padding: 0; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; background: none; color: var(--ink); font-weight: 700; }
.paper-fields input:focus-visible { outline: 0; border-bottom: 2px solid var(--sc-route); }
.paper-lines { width: 100%; margin-top: 24px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.paper-lines th, .paper-lines td { padding: 10px 0; text-align: left; vertical-align: top; }
.paper-lines thead th { padding-top: 0; font-size: .75rem; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
.paper-lines tbody tr + tr td { border-top: 1px solid var(--rule); }
.paper-lines td:first-child { width: 7.5em; font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); }
.paper-lines td:last-child, .paper-lines th:last-child { text-align: right; white-space: nowrap; }
.paper-lines small { display: block; font-size: .8125rem; font-weight: 400; color: var(--ink-2); }
.paper-lines s { margin-right: 8px; font-size: .8125rem; color: var(--ink-2); }
.paper-lines tfoot th, .paper-lines tfoot td { padding-top: 14px; border-top: 2px solid var(--ink); font-size: 1.125rem; font-weight: 700; }
.paper-lines tfoot td { font-size: 1.5rem; }
.paper-scene { margin-top: 20px; border: 1px solid var(--rule); border-radius: var(--r-tag); background: #F7F6FB; }
.paper-scene .scene { height: auto; }
.paper-scene figcaption { padding: 8px 12px; border-top: 1px solid var(--rule); font-size: .75rem; color: var(--ink-2); }
.paper-note { margin-top: 10px; font-size: .8125rem; color: var(--ink-2); }
.paper-foot { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: .75rem; color: var(--ink-2); }
.paper-link { flex-basis: 100%; font-family: var(--mono); word-break: break-all; }

.print-root { display: none; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 70; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--face-2); font-size: .9375rem; translate: -50% 16px; opacity: 0; pointer-events: none; transition: opacity .3s, translate .3s var(--ease); }
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ---------------------------------------------------------------- 動態
   每一段動畫都有它的理由：首屏進場交代主從、捲動進場照閱讀順序、
   配置圖的落下與淡入是「你剛剛選的東西出現了」、手機的光點是「大家正在玩」。 */

@media (prefers-reduced-motion: no-preference) {
  /* 第一屏的字不等捲動，一載入就照閱讀順序進場。 */
  .lead-head > * { animation: rise .9s var(--ease) both; }
  .door { animation: rise 1.1s var(--ease) .12s both; }
  .door + .door { animation-delay: .22s; }
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > :nth-child(3) { animation-delay: .08s; }
  .hero-copy > :nth-child(4) { animation-delay: .16s; }
  .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .hero-screen { animation: rise 1.1s var(--ease) .1s both; }
  .hero-phone { animation: phone-in 1s var(--ease) both; }
  .hero-phone-a { animation-delay: .34s; }
  .hero-phone-b { animation-delay: .46s; }
  .hero-phone-a { animation: phone-in 1s var(--ease) .34s both, shake 4.8s ease-in-out 2s infinite; }

  .js [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; translate: 0 0; }
  .js .how-phones img:nth-child(3n + 2)[data-reveal] { translate: 0 62px; }
  .js .how-phones img:nth-child(3n + 2)[data-reveal].is-in { translate: 0 40px; }
  .game { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

  .sc-root.is-fresh { animation: fade .5s ease both; }
  .sc-obj.is-new { animation: drop .6s var(--ease) both; }
  .sc-phone-halo.is-tw { animation: twinkle 2.6s ease-in-out infinite; }
  .sc-ping { animation: ping 1.3s var(--ease) both; }
  .sc-ping.is-late { animation-delay: .3s; }
  .pick-shot img, .bill img { animation: fade .4s ease both; }
}
/* 換頁的轉場：舊的一頁淡出、新的一頁淡入，活動和婚禮互換時紫色慢慢換成粉色。
   用瀏覽器的跨頁 View Transitions，這裡只把預設的淡入淡出拉長一點。每一頁都選用：只有其中幾頁選用的話，
   從有選用的頁走到沒選用的頁，瀏覽器會在主控台丟一則「Transition was skipped」。不支援的瀏覽器就是一般的換頁。 */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; translate: 0 -14px; } }
@keyframes phone-in { from { opacity: 0; translate: 0 48px; } }
@keyframes twinkle { 50% { opacity: .55; } }
@keyframes ping { from { opacity: .95; scale: .2; } to { opacity: 0; scale: 1.35; } }
@keyframes shake { 0%, 10%, 100% { rotate: -7deg; } 2% { rotate: -12deg; } 4% { rotate: -3deg; } 6% { rotate: -11deg; } 8% { rotate: -5deg; } }

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

@media (max-width: 900px) {
  .nav-in { gap: 16px; }
  .lead { min-height: 0; padding-top: calc(var(--nav-h) + 32px); }
  .doors { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: calc(var(--nav-h) + 36px); }
  .how, .faq, .next { grid-template-columns: 1fr; }
  .how-copy { order: -1; }
  .faq h2 { position: static; }
  .claim-facts, .claim-modes, .easy-list { grid-template-columns: 1fr; }
  .pack-list { flex-direction: column; }
  /* 手機上兩段直排；特寫是直的，不要撐滿整個寬度。 */
  .playtest-grid { grid-template-columns: 1fr; }
  .playtest-grid figure + figure { width: min(75%, 300px); }
  .bento { grid-template-columns: 1fr; }
  .bento .cell { grid-column: auto; }
  .cell-practice img, .cell-quiz img { flex: none; height: auto; aspect-ratio: 16 / 9; }
  .cell-console img { flex: none; width: min(70%, 280px); height: auto; aspect-ratio: 780 / 1080; }
  .games-bar .rail-steps { display: none; }

  /* 選購：預覽圖黏在上面，選項在下面捲；總價固定在畫面底部。 */
  .planner { grid-template-columns: 1fr; }
  .preview { top: var(--nav-h); z-index: 30; height: auto; min-height: 0; max-height: none; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 10px; background: var(--night); border-bottom: 1px solid var(--line); gap: 8px; }
  /* 預覽圖的高度：平板給多一點，手機要留位置給選項。 */
  .planner { --sheet-h: clamp(260px, 40dvh, 440px); }
  .sheet { flex: none; height: var(--sheet-h); }
  .planner { gap: 0; }
  .progress { display: none; }
  .block { min-height: calc(100dvh - var(--nav-h) - var(--sheet-h) - 170px); padding-block: 20px; scroll-margin-top: calc(var(--sheet-h) + 92px); }
  .bill { top: 38px; left: 10px; padding: 4px 6px; }
  .bill > span { display: none; }
  .bill img { width: 34px; }
  /* 目錄的標題列：第一排是標題和兩顆按鈕，第二排是三個級距，放不下就左右滑。分頁也改成一排左右滑。 */
  .book-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 12px; padding: 12px 14px; }
  .book-title { display: contents; }
  .book-title h2 { grid-area: 1 / 1; font-size: 1.0625rem; }
  .book-head .link { grid-area: 1 / 2; }
  .book-head .btn { grid-area: 1 / 3; }
  .book-tiers { grid-area: 2 / 1 / 3 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .book-tiers li { flex: none; }
  .book .games-tabs { flex-wrap: nowrap; padding: 14px 14px 0; overflow-x: auto; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 18px 14px 32px; }
  .opts-3 { grid-template-columns: 1fr; }
  .opts-3 .opt { grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 16px; }
  .opts-3 .opt-price { grid-column: auto; padding-top: 2px; }
  .seg { flex-wrap: wrap; }
  .seg-lead { flex: 1 1 100%; padding: 6px 14px; justify-items: start; }
  .seg-opt { flex: 1 1 40%; }
  .tease-foot { flex-direction: column; }
  .tease-foot .btn { min-height: 52px; }
  .tease-caption { display: none; }
  .tally > div { grid-template-columns: 1fr; }
  .sheet-bar { padding: 10px 14px; font-size: .75rem; }
  .sheet-bar b, .sheet-bar-foot span:first-child { display: none; }
  .sheet-bar-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flow li { padding: 8px 12px 9px; font-size: .75rem; }
  .flow.is-seq li.is-gone { padding-inline: 0; }
  .flow-when { display: none; }
  .flow b { font-size: .8125rem; }
  .tally { position: fixed; inset: auto 0 0; z-index: 40; border-radius: 0; border-width: 1px 0 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); translate: 0 110%; transition: translate .35s var(--ease); }
  .in-planner .tally { translate: 0 0; }
  .toast { bottom: 96px; }
  .opts-2 { grid-template-columns: 1fr; }
  .foot-links { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 560px) {
  .planner { --sheet-h: clamp(200px, 30dvh, 300px); }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-price b { display: block; margin: 0 0 2px; }
  /* 方案卡上面的人數：「多少人？」自己一行，三顆平分一排。 */
  .pack-sizes > span { flex-basis: 100%; }
  .pack-sizes .tab { flex: 1 1 0; justify-content: center; padding-inline: 6px; font-size: .875rem; }
  .opt { grid-template-columns: auto minmax(0, 1fr); }
  .opt-price { grid-column: 2; padding-top: 4px; }
  /* 小圖移到右邊，字和價格疊在中間那一欄。 */
  .opt.has-thumb { grid-template-columns: auto minmax(0, 1fr) 84px; }
  .opt.has-thumb .opt-thumb { grid-column: 3; grid-row: 1 / span 2; width: 84px; }
  .opt.has-thumb .opt-body { grid-column: 2; grid-row: 1; }
  .opt.has-thumb .opt-price { grid-row: 2; }
  .lines li { grid-template-columns: minmax(0, 1fr) auto; }
  .line-group { grid-column: 1 / -1; line-height: 1.2; }
  /* 金額那一欄放不下兩個價格：新價格在上，劃掉的原價縮小放在下面。 */
  .line-amount { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-end; }
  .line-amount s { margin-right: 0; font-size: .75rem; line-height: 1.3; }
  .paper-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-tools p { display: none; }
  .quote-tools .btn { margin-right: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--night); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------------------------------------------------------------- 列印（存成 PDF） */

@media print {
  @page { size: A4; margin: 12mm; }
  html.is-printing, html.is-printing body { background: #fff; }
  html.is-printing body > *:not(.print-root) { display: none !important; }
  html.is-printing .print-root { display: block; }
  /* 收緊一點，讓整張報價單落在一頁 A4 裡，方便附在簽呈後面。 */
  .print-root .paper { margin: 0; padding: 0; background: #fff; font-size: 10.5pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-root .paper-head { padding-bottom: 12px; }
  .print-root .paper-meta, .print-root .paper-fields { margin-top: 12px; }
  .print-root .paper-lines { margin-top: 14px; }
  .print-root .paper-lines th, .print-root .paper-lines td { padding: 5px 0; }
  .print-root .paper-lines small { display: inline; margin-left: .9em; }
  .print-root .paper-lines tfoot th, .print-root .paper-lines tfoot td { padding-top: 10px; }
  .print-root .paper-scene { margin-top: 14px; break-inside: avoid; }
  .print-root .paper-note { margin-top: 6px; }
  .print-root .paper-foot { margin-top: 12px; padding-top: 8px; }
}

/* 窄螢幕：導覽列還是那三樣，只是擠一點。 */
@media (max-width: 760px) {
  .nav-in { gap: 10px; }
}
@media (max-width: 560px) {
  .nav-logo-full { display: none; }
  /* 手機上首頁的兩張卡片圖矮一點，第二張才不會整個掉到畫面外面。 */
  .door img { aspect-ratio: 3 / 1; }
  /* 裁得更扁的時候，婚禮那張要往下一點，新人的頭和頭紗才在畫面裡，一看就知道是婚禮。 */
  .door-wedding img { object-position: 50% 55%; }
  /* 活動那張（尾牙會場）大螢幕在最上面：靠上裁，螢幕才不會被切掉。 */
  .door-events img { object-position: 50% 0%; }
  .nav-logo-icon { display: block; }
  .nav .btn-s { padding: 0 .8em; }
  .nav-seg a { padding: 0 10px; }
}