/* ============================================================
   custom-vinyl「黑膠」｜style.css（2026-10-03 B0 骨架）
   視覺系統：七〇年代台灣唱片行——封套紙、黑膠溝槽、橘色圓標、芥末黃、墨綠、燙金細線；
   冰果室點唱機、唱片背面、彩膠內袋、店家火柴盒、歌詞單、點歌卡。**不是美式 diner**：沒有棋盤地板、沒有霓虹粉藍；
   也不撞中式模板的正紅＋滿版金（金只當 1px 細線與圓標外圈）。
   - 色：封套紙 #F3E9D2／內袋 #E3D3AE、墨 #221D18／次要 #5A4E42、黑膠 #161412／溝槽 #2B2622、
     圓標橘 #D9622B（按壓 #B84E1F）、芥末黃 #E0B33B、墨綠 #2F4A3B、燙金 #C9A24A。
     **可讀文字一律墨色**（橘只當裝飾；橘底上的字用墨色＝4.56:1）。
   - 字：Bodoni Moda（拉丁顯示）、Archivo Narrow（技術小字）、Chocolate Classical Sans（中文標題級，text= 子集）、
     裝置明體（中文內文；沒有才掛 Google 的 Noto Serif TC）、賓客名用系統宋體／楷體 700（不走 webfont）。
   - 幾何（唱臂、唱盤、溝槽、圓標、三角形）一律 CSS／SVG 畫，不靠字型。
   規則（沿用 #2）：
   - 動畫的前置隱藏態一律寫在 html.wc（CSS 進場）或 html.fx（GSAP 層）底下，預設 CSS 永遠是完成態——
     preview／爬蟲／降級永遠看得到內容。
   - 賓客頁不因減少動態降級（旗標 wk-keep-motion）：本檔沒有 RM 分支。
   - **轉動層禁 filter／blur／mix-blend**；反光一律放在不轉的上層。
   - B0 只有骨架與版面結構；精緻動畫在 B2–B5。
   ============================================================ */

:root {
  --paper: #f3e9d2;
  --paper-lo: #e3d3ae;
  --paper-hi: #fbf5e6;
  --ink: #221d18;
  --ink-soft: #5a4e42;
  --vinyl: #161412;
  --groove: #2b2622;
  --sheen: rgba(255, 240, 210, .14);
  --orange: #d9622b;
  --orange-press: #b84e1f;
  --mustard: #e0b33b;
  --green: #2f4a3b;
  --gold: #c9a24a;
  --wood: #5b3a24;
  --wood-hi: #7a5034;

  /* 標準 token（base.css 與共用元件會讀） */
  --paper-raise: var(--paper-hi);
  --accent: var(--ink);
  --accent-ink: var(--paper);
  --hairline: rgba(34, 29, 24, .2);
  --scratch-a: #a8a092;
  --scratch-b: #c7bfb0;
  --warn: #8e2c22;

  --tc-face: "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", "Noto Serif TC";
  --font-tc: var(--tc-face), serif;
  --font-head: "Chocolate Classical Sans", var(--tc-face), serif;
  --font-display: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --font-narrow: "Archivo Narrow", "Arial Narrow", var(--tc-face), sans-serif;
  --font-hand: "Kaiti TC", "BiauKai", "DFKai-SB", "STKaiti", var(--tc-face), serif;   /* 手寫感（謝卡、留言回顯）：裝置楷體優先，沒有就落到明體；不自架切片 */
  --font-guest: "Songti TC", "Kaiti TC", "DFKai-SB", "Noto Serif CJK TC", "Noto Serif TC", serif;
  --font-serif-tc: var(--font-tc);
  --stripes: linear-gradient(180deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--paper) 50% 75%, var(--green) 75% 100%);
  --stripes-x: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--paper) 50% 75%, var(--green) 75% 100%);
  /* 溝槽：平滑三角波（沒有硬邊）、振幅收小——硬邊細紋在 2×／3× 截圖會疊出旋渦狀 moiré（B2 量：同心圓角向亮度 σ 3.4→1.6，qa/tools/moire.mjs） */
  --grooves: repeating-radial-gradient(circle at 50% 50%, #1c1917 0, #26201c 1.2px, #1c1917 2.4px);

  --wide-max: 72rem;
  --radius: 4px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.2, 1.4, .4, 1);
  --ease-in: cubic-bezier(.55, 0, .9, .4);
}

/* 橫向溢出用 clip 不用 hidden（hidden 會讓 body 變捲動容器，ScrollTrigger 量錯）；
   scroll-behavior 一律 auto（蓋掉 base.css 的 smooth：ScrollTrigger.refresh 先捲到 0 再捲回，smooth 會讓量到的 start 漂移）；
   scrollbar-gutter stable：開場鎖捲動與收場後版面等寬（#2 量過：不固定的話收場那一刻整頁變窄 15px 全部重排） */
html { background: var(--paper); overflow-x: clip; scroll-behavior: auto; scrollbar-gutter: stable; }
html.has-intro { background: #1b1714; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-tc);
  font-size: max(17px, var(--text-body));
  line-height: 1.85;
  overflow-x: clip;
}
.hd { font-family: var(--font-head); font-weight: 400; }
.tc { font-family: var(--font-tc); font-weight: 400; letter-spacing: .08em; }
.gname { font-family: var(--font-guest); font-weight: 700; }
.section { position: relative; overflow-x: clip; }
.section-title { font-family: var(--font-head); font-weight: 400; font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.25; letter-spacing: .08em; color: var(--ink); margin: 0; text-wrap: balance; }
.section-title:empty { display: none; }

/* 紙紋顆粒：全頁固定一層（獨立 fixed div；不用負 z 的偽元素——body 有底色會蓋掉） */
.grain {
  position: fixed; inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .75 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---- 名字排版：字級＝容器寬 ÷ 一行的字寬數（--n 由 index.html 的 __vnFit 算；不量版面） ----
   用法：節點掛 .vn-fit，父層開 container-type: inline-size，再給 --fit-base（上限字級）。 */
.vn-fit.vn-fit { white-space: nowrap; font-size: var(--fit-base, 1em); }
@supports (width: 1cqw) { .vn-fit.vn-fit { font-size: min(var(--fit-base, 1em), calc((100cqw - var(--fit-pad, 0px)) / var(--n, 3))); } }
@supports not (width: 1cqw) { .vn-fit.vn-fit { font-size: calc(var(--fit-base, 1em) * min(1, var(--fit-k, 4) / var(--n, 3))); } }
/* 多行：斷點由 __vnFit 算好、用換行字元寫死（white-space: pre），瀏覽器不再自己挑斷點（評審第 2 輪：「王小／明 David」） */
.vn-fit.vn-fit[data-lines="2"], .vn-fit.vn-fit[data-lines="3"] { white-space: pre; line-height: 1.14; }
/* 大字放不下就等比縮（render.js fitWords 寫 --fitw） */
.fitw { white-space: nowrap; font-size: calc(var(--fitw-base, 1em) * var(--fitw, 1)); }

/* ---- 限量貼紙（開場、封套共用）：芥末黃圓貼、燙金細圈、墨色字 ---- */
.vn-sticker {
  container-type: inline-size;
  position: absolute;
  width: var(--sk, 8rem); height: var(--sk, 8rem);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: .1rem;
  overflow: hidden;
  padding: calc(var(--sk, 8rem) * .12);   /* 不用 %：padding 的 % 是對包含塊寬度算的，貼紙內容寬會被吃掉一大半 */
  box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 55%), var(--mustard);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--mustard), inset 0 0 0 4px var(--gold), 0 3px 0 rgba(34, 29, 24, .18), 0 8px 16px -6px rgba(34, 29, 24, .5);
  transform: rotate(-9deg);
}
.vn-sticker > * { max-width: 100%; }
.vs-k { white-space: nowrap; font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, 11cqw); letter-spacing: .08em; line-height: 1.2; }
.vs-name { --fit-base: 22cqw; --fit-pad: 0px; --fit-k: 4; font-family: var(--font-guest); font-weight: 700; line-height: 1.15; max-width: 100%; }
.vs-no { white-space: nowrap; font-style: normal; font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, 11.5cqw); letter-spacing: .08em; }
.vs-no[hidden] { display: none; }
.vn-sticker.is-promo .vs-name { --fit-base: 15cqw; }
/* 兩行的名字（6 字以上、英文名）字級封頂低一點：三行字（限量壓製 · 致／名字兩行／No.）疊起來才放得進圓裡（B2 名字矩陣） */
.vs-name.vn-fit[data-lines="2"] { --fit-base: 16.2cqw; }
/* 三行（10 個字寬以上的長名字，評審第 2 輪：12 字不再截成「…」）：名字封頂 13cqw，上下兩行小字收一點、間距收緊，五行疊起來放進圓裡 */
.vs-name.vn-fit[data-lines="3"] { --fit-base: 13cqw; line-height: 1.08; }
.vn-sticker[data-lines="3"] { gap: 0; padding-inline: calc(var(--sk, 8rem) * .1); }
.vn-sticker[data-lines="3"] .vs-k, .vn-sticker[data-lines="3"] .vs-no { font-size: max(11px, 9.5cqw); }
/* 兩行：海報上那張貼紙比較小（約 106px），「限量壓製 · 致」整行在圓的上緣會頂出去——上下小字收到 10cqw、名字封頂 16.2cqw（封套那張約 106px 寬，名字剛好 12.8px） */
.vn-sticker[data-lines="2"] .vs-k, .vn-sticker[data-lines="2"] .vs-no { font-size: max(11px, 10cqw); }
.vn-sticker[data-lines="2"] .vs-k { letter-spacing: .04em; }
/* 名字字級下限 11px（評審第 2 輪：長名字縮字放進圓裡，但不准縮到看不清） */
@supports (width: 1cqw) { .vs-name.vn-fit.vn-fit { font-size: max(11px, min(var(--fit-base, 1em), calc((100cqw - var(--fit-pad, 0px)) / var(--n, 3)))); } }

/* ============================================================
   開場：俯視唱盤
   幾何（以唱盤底座寬 --tw 為單位）：唱盤中心 (.42, .42)、半徑 .36；樞軸 (.86, .12)；唱臂長 .60；
   臂架上 0°、轉 22° 唱針落在唱片外圈（距中心約 .33）。
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 80;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.intro-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.intro-room {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(255, 226, 170, .2), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .04) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, #3a2a1e, #24190f);
}
.tt-wrap {
  --tw: min(86vw, 460px, 62svh);
  position: relative; z-index: 2;
  margin-top: -7svh;
  transform-origin: calc(var(--tw) * .42) calc(var(--tw) * .42);
}
.tt {
  position: relative;
  width: var(--tw); height: calc(var(--tw) * .92);
  border-radius: calc(var(--tw) * .035);
  background:
    linear-gradient(180deg, rgba(255, 236, 200, .16), transparent 30%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .1) 0 3px, transparent 3px 11px, rgba(255, 220, 170, .06) 11px 13px, transparent 13px 29px),
    linear-gradient(135deg, var(--wood-hi), var(--wood) 60%, #46301e);
  box-shadow: 0 0 0 2px #2b1c11, inset 0 0 0 calc(var(--tw) * .012) rgba(255, 236, 200, .08), 0 36px 50px -18px rgba(0, 0, 0, .75);
}
.tt-grain { position: absolute; inset: calc(var(--tw) * .02); border-radius: calc(var(--tw) * .025); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .45); pointer-events: none; }
.tt-brand {
  position: absolute; left: calc(var(--tw) * .06); bottom: calc(var(--tw) * .035);
  margin: 0; color: #f3e9d2;
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "opsz" 48;
  font-size: max(15px, calc(var(--tw) * .042)); letter-spacing: .14em; line-height: 1.1;
  display: grid;
}
.tt-brand small { font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, calc(var(--tw) * .03)); letter-spacing: .18em; color: #e3d3ae; }
.tt-speed { position: absolute; right: calc(var(--tw) * .2); bottom: calc(var(--tw) * .04); margin: 0; display: flex; gap: calc(var(--tw) * .015); font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, calc(var(--tw) * .03)); }
.tt-speed b, .tt-speed span { display: grid; place-items: center; width: calc(var(--tw) * .085); height: calc(var(--tw) * .06); border-radius: 3px; background: #2a2622; color: #e3d3ae; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .5); }
.tt-speed b { background: var(--mustard); color: var(--ink); }
.tt-platter {
  position: absolute;
  left: calc(var(--tw) * .06); top: calc(var(--tw) * .06);
  width: calc(var(--tw) * .72); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #3a3530 0 60%, #6b6359 66%, #2a2622 70%), #2a2622;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 255, 255, .08);
}
/* 轉動層：唱片＋圓標（禁 filter／blur／mix-blend）。反光在上面那層不轉的 .tt-sheen */
.tt-spin { position: absolute; inset: 2.5%; border-radius: 50%; will-change: transform; }
.tt-record { position: absolute; inset: 0; border-radius: 50%; background: var(--grooves), var(--vinyl); box-shadow: inset 0 0 0 2px #0c0b0a; }
.tt-label { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; }
.tl-ring { font-family: var(--font-narrow); font-weight: 700; font-size: 11px; letter-spacing: .06em; fill: #221d18; }
.tl-cat { font-family: var(--font-narrow); font-weight: 700; font-size: 15px; letter-spacing: .1em; fill: #221d18; }
.tl-side { font-family: var(--font-display); font-weight: 900; font-size: 26px; fill: #221d18; }
.tt-sheen {
  position: absolute; inset: 2.5%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 25deg, transparent 0 8%, var(--sheen) 13%, transparent 19% 49%, rgba(255, 240, 210, .1) 62%, transparent 69%);
}
.tt-spindle { position: absolute; left: 50%; top: 50%; width: 3%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle at 35% 35%, #fff, #b9b2a6 50%, #6b6359); }
.tt-pivot {
  position: absolute; left: calc(var(--tw) * .815); top: calc(var(--tw) * .075);
  width: calc(var(--tw) * .09); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e6dfd2, #8f877b 55%, #3b3631);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5), 0 0 0 calc(var(--tw) * .012) #2a2622;
}
.tt-rest { position: absolute; left: calc(var(--tw) * .835); top: calc(var(--tw) * .46); width: calc(var(--tw) * .05); height: calc(var(--tw) * .07); border-radius: 3px; background: linear-gradient(90deg, #3b3631, #8f877b 45%, #3b3631); box-shadow: 0 3px 5px rgba(0, 0, 0, .45); }
.tt-rest::after { content: ""; position: absolute; left: 50%; top: -18%; width: 70%; height: 40%; translate: -50% 0; border-radius: 0 0 50% 50%; border: 2px solid #8f877b; border-top: 0; }
/* 唱臂：外層 .tt-arm 只動 rotate（樞軸＝transform-origin 0 0，放在樞軸中心）；內層 .arm-body 負責輕晃（individual rotate，跟外層疊加） */
.tt-arm {
  position: absolute; left: calc(var(--tw) * .86); top: calc(var(--tw) * .12);
  width: 0; height: 0; z-index: 3;
  transform: rotate(var(--vn-arm, 0deg));
  transform-origin: 0 0;
  /* 放手沒過門檻：唱臂被臂架的彈簧拉回去——先快後慢，撞到臂架輕輕回彈一下（-1° 左右），不是 UI 那種滑入 */
  transition: transform .62s cubic-bezier(.3, 1.45, .55, 1);
}
.intro.is-dragging .tt-arm { transition: none; }
/* 抓起唱臂＝離開臂架抬高一點：影子拉開、唱頭略放大（俯視時越高越大）；放下（commit）再收回 */
.arm-shadow, .arm-head { transition: transform .22s cubic-bezier(.3, .8, .4, 1), opacity .22s; }
.intro.is-dragging .arm-shadow { transform: translate(calc(var(--tw) * .034), calc(var(--tw) * .042)); opacity: .8; }
.intro.is-dragging .arm-head { transform: scale(1.06); }
.arm-body { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.arm-tube, .arm-weight, .arm-head, .arm-shadow { position: absolute; display: block; }
.arm-tube {
  left: calc(var(--tw) * -.011); top: calc(var(--tw) * -.02);
  width: calc(var(--tw) * .022); height: calc(var(--tw) * .58);
  border-radius: calc(var(--tw) * .011);
  background: linear-gradient(90deg, #6b6359, #f1ebe0 40%, #a59d90 70%, #5a534b);
}
.arm-shadow {
  left: calc(var(--tw) * .004); top: calc(var(--tw) * .01);
  width: calc(var(--tw) * .026); height: calc(var(--tw) * .6);
  border-radius: calc(var(--tw) * .013);
  background: rgba(0, 0, 0, .38);
  transform: translate(calc(var(--tw) * .022), calc(var(--tw) * .028));
}
.arm-weight { left: calc(var(--tw) * -.032); top: calc(var(--tw) * -.12); width: calc(var(--tw) * .064); height: calc(var(--tw) * .085); border-radius: calc(var(--tw) * .012); background: linear-gradient(90deg, #2a2622, #6b6359 45%, #2a2622); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.arm-head {
  left: calc(var(--tw) * -.028); top: calc(var(--tw) * .545);
  width: calc(var(--tw) * .056); height: calc(var(--tw) * .085);
  border-radius: calc(var(--tw) * .008) calc(var(--tw) * .008) calc(var(--tw) * .014) calc(var(--tw) * .014);
  background: linear-gradient(90deg, #1f1c19, #4a443d 50%, #1f1c19);
  box-shadow: 0 0 0 1px #0c0b0a;
}
.arm-head i { position: absolute; left: 20%; right: 20%; bottom: 14%; height: 34%; border-radius: 2px; background: var(--orange); }
/* 等待時：唱臂 1.2s 起每 2 秒輕晃一下（一碰就停） */
.intro-wait:not(.is-touched) .arm-body { animation: vn-wiggle 2s 1.2s ease-in-out infinite; }
@keyframes vn-wiggle { 0%, 66%, 100% { rotate: 0deg; } 76% { rotate: 4deg; } 88% { rotate: -1deg; } }

.intro-guide {
  position: absolute; left: 50%; bottom: max(6svh, calc(env(safe-area-inset-bottom, 0px) + 2rem));
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .2rem;
  color: #f3e9d2;
  font-family: var(--font-tc); font-size: max(16px, 1.1rem); letter-spacing: .12em;
  white-space: nowrap;
  padding: .5rem 1rem;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.intro-guide small { font-family: var(--font-tc); font-size: 1rem; letter-spacing: .14em; color: #e3d3ae; }
.ig-arc { display: block; width: 3.2rem; height: 1.6rem; border: 2px solid #f3e9d2; border-bottom: 0; border-radius: 3.2rem 3.2rem 0 0; position: relative; margin-bottom: .35rem; }
.ig-arc::after { content: ""; position: absolute; left: -6px; bottom: -2px; width: 8px; height: 8px; border-left: 2px solid #f3e9d2; border-bottom: 2px solid #f3e9d2; transform: rotate(-20deg); }
.intro-wait .intro-guide { animation: vn-fadein .8s .5s ease forwards; }
@keyframes vn-fadein { to { opacity: 1; } }
.intro-skip {
  position: absolute; z-index: 3;
  right: max(.8rem, env(safe-area-inset-right, 0px)); top: max(.8rem, env(safe-area-inset-top, 0px));
  color: #e3d3ae; font-family: var(--font-tc); font-size: 1rem; letter-spacing: .2em;
  padding: .6rem 1.1rem; min-height: 44px;
  border: 1px solid rgba(243, 233, 210, .4); border-radius: 3px;
}
/* 貼紙貼在唱盤左上外側（手機上方有空間；不壓唱盤上的字） */
.intro-sticker { --sk: clamp(7.5rem, 33vw, 10rem); left: 0; top: calc(var(--tw) * -.4); z-index: 4; }   /* 下限 7.5rem：名字矩陣（7 字、英文名）在 320 寬也要放得下 */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .tt-wrap { --tw: min(54vw, 560px, 74svh); margin-top: -4svh; }
  .intro-sticker { left: calc(var(--tw) * -.36); top: calc(var(--tw) * .08); }
}

/* commit：機械的重量感——每一段都是「有質量的東西被推動、再停下」，不是 UI 滑入：
   0–.44s  唱臂擺到唱片外圈（緩出，衝過頭 0.6° 再被阻尼拉回）
   .44–.58s 唱針降下（俯視：唱頭變小、影子收攏貼近臂身）；.58s 碰到唱片＝收場（index.html 同步 580ms）、整台輕輕一震
   .58–1.9s 唱盤從 0 加速（ease-in，轉速一路爬升）；.9–1.75s 往圓標 zoom in（先慢後快再煞住）
   1.45–1.85s 淡出（收場只認 vn-stage-out） */
.intro-commit .tt-arm { animation: vn-arm-in .44s cubic-bezier(.22, .61, .36, 1) both; transition: none; }
@keyframes vn-arm-in {
  from { transform: rotate(var(--vn-from, 0deg)); }
  78% { transform: rotate(22.6deg); }
  to { transform: rotate(22deg); }
}
.intro-commit .arm-shadow { animation: vn-drop .14s .44s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes vn-drop {
  from { transform: translate(calc(var(--tw) * .022), calc(var(--tw) * .028)); opacity: 1; }
  to { transform: translate(calc(var(--tw) * .006), calc(var(--tw) * .008)); opacity: .62; }
}
.intro-commit .arm-head { animation: vn-head-down .26s .44s linear both; }
@keyframes vn-head-down {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  54% { transform: scale(.93); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  76% { transform: scale(.945); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { transform: scale(.935); }
}
.intro-commit .tt { animation: vn-thud .2s .58s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes vn-thud { 0%, 100% { translate: 0 0; } 35% { translate: 0 1.5px; } 70% { translate: 0 -.4px; } }
.intro-commit .tt-spin { animation: vn-spinup 1.32s .58s cubic-bezier(.5, 0, .85, .45) both; }
@keyframes vn-spinup { from { transform: rotate(0deg); } to { transform: rotate(480deg); } }
.intro-commit .tt-wrap { animation: vn-zoom .85s .9s cubic-bezier(.62, 0, .2, 1) both; }
@keyframes vn-zoom { to { transform: scale(3.6); } }
.intro-commit .intro-stage { animation: vn-stage-out .4s 1.45s ease forwards; }
@keyframes vn-stage-out { to { opacity: 0; } }
.intro-commit .intro-guide, .intro-commit .intro-skip { animation: vn-fadeout .25s ease forwards; }
@keyframes vn-fadeout { to { opacity: 0; } }
@keyframes vn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   ① 海報：12 吋封套＋露出來的黑膠
   手機：封套滿寬、黑膠從下緣露 40%（舞台比例 1 : 1.376）；桌機：封套在左、黑膠往右露 55%。
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(1.2rem, 4vw, 2.6rem) var(--gutter) clamp(2rem, 6vw, 4.4rem);
  display: grid; align-content: center; justify-items: center;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  background:
    radial-gradient(80% 50% at 50% 30%, rgba(255, 255, 255, .35), transparent 70%),
    var(--paper);
  overflow: clip;
}
.hero-stage { position: relative; width: min(100%, 30rem); aspect-ratio: 1 / 1.376; }
/* 封套（B2 改版）：七〇年代台灣唱片封套的版面——左邊芥黃色塊直排大片名、四色條紋切出 L 形、照片走褪色印刷＋網點、
   墨色廠牌章、立體聲徽章；最上層一張不擋點擊的「磨損層」（四角磨白、唱片壓出來的一圈圓痕、邊緣褪色）。
   全部是不轉的靜態層，可以用 filter／mix-blend（轉動限制只管唱片那層）。尺寸一律 cqw（封套寬的 %），手機桌機同一套比例。 */
.sleeve {
  container-type: inline-size;
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 100%; aspect-ratio: 1;
  display: grid;
  grid-template-columns: 19% 3.2% minmax(0, 1fr);   /* 不用 cqw：容器自己的屬性查不到自己，cqw 會落到外層（桌機變成視窗寬的 19%） */
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--paper-lo);
  box-shadow: 0 30px 46px -22px rgba(34, 29, 24, .6), 0 0 0 1px rgba(34, 29, 24, .22);
  overflow: hidden;
}
.sl-photo { grid-column: 3; grid-row: 1; position: relative; overflow: hidden; min-height: 0; background: var(--green); }
/* 褪色印刷：彩度降一點、黑位抬起來、偏暖（七〇年代四色印刷放了五十年的樣子） */
.sl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.22) saturate(.84) contrast(.9) brightness(1.04); }
/* 網點：45° 斜網屏（3.6px 一格，2×／3× 截圖驗過不起波紋），multiply 疊在照片上 */
.sl-dots {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(60, 38, 18, .9) 0 28%, transparent 34%) 0 0 / 3.6px 3.6px;
  transform: rotate(45deg) scale(1.5);
  mix-blend-mode: multiply; opacity: .11;
}
.sl-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 7cqw rgba(70, 40, 12, .32); background: linear-gradient(180deg, rgba(243, 222, 180, .12), transparent 45%); }
/* 直排大片名：Chocolate Classical Sans、字距收緊、橘色套印偏移（兩色印刷對不準的那一點點） */
.sl-spine { grid-column: 1; grid-row: 1; position: relative; display: grid; place-items: center; min-height: 0; background: var(--mustard); padding: 3.5cqw 0; }
.sl-title {
  margin: 0;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: min(13.5cqw, 66cqw / var(--tn, 6));
  line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
  text-shadow: .05em .045em 0 var(--orange);
  -webkit-text-stroke: .03em var(--ink);   /* 這支字只有一個字重：描一圈同色邊＝加粗（七〇年代片名那種粗黑） */
  paint-order: stroke fill;
  white-space: nowrap;
}
.sl-stripes { grid-column: 2; grid-row: 1; display: block; background: var(--stripes-x); }
.sl-band { grid-column: 1 / -1; grid-row: 2; position: relative; background: var(--paper); padding: 5.4cqw 5cqw 3.6cqw; display: grid; gap: .6cqw; }
.sl-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3.2cqw; background: var(--stripes); }
/* 評審第 1 輪：WebKit 這行掉成細體——原本只載了正體的 Bodoni Moda，斜體是瀏覽器自己合成（Chrome 合成粗斜、WebKit 合成細斜）。
   改成真的載入 ital 軸（只有這一行用得到，用到才下載），並關掉合成，兩邊同一個字重 */
.sl-title-en { font-synthesis: none; }
.sl-title-en { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 800; font-variation-settings: "opsz" 96; font-size: 8.6cqw; line-height: 1; letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.sl-title:empty, .sl-title-en:empty { display: none; }
.hero-names { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; font-size: max(17px, 5.2cqw); line-height: 1.3; letter-spacing: .1em; color: var(--ink); }
.hero-names .amp { font-family: var(--font-display); font-style: italic; font-size: .8em; color: var(--ink-soft); letter-spacing: 0; }
/* 墨色廠牌章（左上，壓在照片上）＋目錄編號（右上） */
/* 這幾個章與貼紙都放在照片那一格（grid-area 當定位基準：絕對定位的 grid 子層以自己那一格為包含塊） */
.sl-shop, .sl-cat, .sl-stereo, .sl-sticker { grid-column: 3 / 4; grid-row: 1 / 2; }   /* 兩端都要寫：絕對定位子層的 auto 端線＝容器邊緣，不是下一條格線 */
.sl-shop { position: absolute; z-index: 3; left: 3cqw; top: 3.4cqw; margin: 0; padding: .45em .6em .4em; background: var(--ink); color: var(--paper); font-size: max(12.8px, 3.6cqw); letter-spacing: .14em; line-height: 1.1; white-space: nowrap; border-radius: 2px; box-shadow: 0 0 0 .5cqw var(--paper), 0 0 0 .8cqw var(--ink); }
.sl-shop:empty { display: none; }
.sl-cat { position: absolute; z-index: 3; right: 3.4cqw; top: 3.4cqw; margin: 0; padding: .35em .6em .3em; background: var(--paper); color: var(--ink); font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, 3.2cqw); letter-spacing: .14em; line-height: 1.1; }
/* 立體聲徽章：墨底圓角章，中文在上、STEREO 在下（照片右下角，壓在桌面那一塊） */
.sl-stereo { position: absolute; z-index: 3; right: 3.4cqw; bottom: 3cqw; margin: 0; padding: .35em .75em .4em; display: grid; justify-items: center; gap: .1em; border-radius: .7em; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 .5cqw var(--paper); line-height: 1.05; }
.sl-stereo b { font-size: max(12.8px, 3.6cqw); letter-spacing: .12em; font-weight: 400; }
.sl-stereo span { font-family: var(--font-narrow); font-weight: 700; font-size: max(12.8px, 2.8cqw); letter-spacing: .26em; }
/* 磨損層：四角磨白、邊緣褪色、唱片在封套裡壓出的一圈圓痕（ring wear）——最上層、不擋點擊、alpha 很低，不吃字的對比 */
.sl-wear {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(251, 245, 230, .9) 0 .7cqw, rgba(251, 245, 230, .35) 1.6cqw, transparent 3.2cqw),
    radial-gradient(circle at 100% 0, rgba(251, 245, 230, .8) 0 .5cqw, rgba(251, 245, 230, .3) 1.3cqw, transparent 2.8cqw),
    radial-gradient(circle at 0 100%, rgba(251, 245, 230, .75) 0 .5cqw, rgba(251, 245, 230, .3) 1.4cqw, transparent 3cqw),
    radial-gradient(circle at 100% 100%, rgba(251, 245, 230, .9) 0 .8cqw, rgba(251, 245, 230, .35) 1.8cqw, transparent 3.6cqw),
    radial-gradient(circle closest-side at 50% 50%, transparent 93.2%, rgba(251, 245, 230, .13) 94.6%, rgba(251, 245, 230, .05) 96.4%, transparent 97.6%);
  box-shadow: inset 0 0 0 1px rgba(251, 245, 230, .35), inset 0 0 1.4cqw rgba(251, 245, 230, .16);
}
.sl-sticker { --sk: max(6.6rem, 24cqw); left: 2.4cqw; top: auto; bottom: 2.4cqw; z-index: 3; }
/* 缺圖：七〇年代封套的放射紋（程式畫），不留破圖示 */
.sleeve.is-noimg .sl-photo img { visibility: hidden; }
.sleeve.is-noimg .sl-photo { background: repeating-conic-gradient(from 0deg at 50% 120%, var(--orange) 0 6deg, var(--mustard) 6deg 12deg, var(--paper) 12deg 18deg, var(--green) 18deg 24deg); }

/* 黑膠：定位層（不轉、帶落影）＞ 捲動層 .disc-wrap（fx.js rotate scrub）＞ 自轉層 .disc（CSS 無限動畫）；反光 .disc-sheen 在定位層裡、不轉 */
.disc-pos { position: absolute; z-index: 1; left: 3%; top: 31.69%; width: 94%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 22px 34px -16px rgba(0, 0, 0, .65); }
.disc-wrap { position: absolute; inset: 0; border-radius: 50%; }
.disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--gaps, none), var(--grooves), var(--vinyl);
  box-shadow: inset 0 0 0 2px #0c0b0a, inset 0 0 0 5px #221e1a;
  will-change: transform;
  animation: vn-spin 1.8s linear infinite;
  animation-play-state: paused;
}
html.vn-playing .hero:not(.is-away) .disc { animation-play-state: running; }
.disc-label { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; }
.dl-ring { font-family: var(--font-narrow); font-weight: 700; font-size: 11px; letter-spacing: .05em; fill: #221d18; }
.dl-cat { font-family: var(--font-narrow); font-weight: 700; font-size: 15px; letter-spacing: .12em; fill: #221d18; }
.dl-side { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .2em; fill: #221d18; }
.dl-fine { font-family: var(--font-narrow); font-weight: 700; font-size: 6.4px; letter-spacing: .08em; fill: #221d18; }
.dl-fine-tc { font-family: var(--font-tc); font-weight: 700; font-size: 7px; letter-spacing: .12em; }
.disc-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 30deg, transparent 0 7%, var(--sheen) 12%, transparent 18% 50%, rgba(255, 240, 210, .09) 63%, transparent 70%); }
@media (min-width: 900px) {
  .hero-stage { width: min(88vw, calc(min(72svh, 36rem) * 1.517)); aspect-ratio: 1.517 / 1; }
  .sleeve { width: 65.92%; }
  .disc-pos { left: 38%; top: 3%; width: 62%; }
}

.hero-info { display: grid; justify-items: center; gap: .45rem; text-align: center; max-width: 36rem; }
.hero-greeting { margin: 0; font-size: max(17px, 1.15rem); line-height: 1.7; letter-spacing: .06em; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.hero-greeting:empty { display: none; }
.hero-names-en { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.hero-names-en:empty { display: none; }
.hero-date { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .8rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(15px, 1.05rem); letter-spacing: .14em; color: var(--ink); }
.hero-date span:empty { display: none; }
.countdown { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem .7rem; padding: .45rem 1rem; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-family: var(--font-narrow); color: var(--ink); }
.cd-l { font-family: var(--font-tc); font-size: max(15px, .98rem); letter-spacing: .14em; }
.cd-d { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.cd-d i { font-style: normal; }
.cd-hms { font-weight: 700; font-size: max(15px, 1rem); letter-spacing: .08em; }
.cd-hms i { font-style: normal; }
.cd-at { font-weight: 700; font-size: max(15px, 1rem); letter-spacing: .1em; }
.cd-at:empty { display: none; }
/* 時分秒與「· 18:00」綁成一塊（評審第 1 輪：320 寬時「· 18:00」單獨掉成一行） */
.cd-tail { display: inline-flex; align-items: baseline; gap: .2rem .7rem; white-space: nowrap; }

/* 海報進場（開場收掉才開演；沒開場＝直接完成態） */
html.wc .sleeve { opacity: 0; transform: translateY(24px) rotate(-1.5deg); }
html.wc .hero.is-on .sleeve { animation: vn-rise .9s var(--ease-out) forwards; }
html.wc .disc-pos { opacity: 0; translate: 0 -22%; }
html.wc .hero.is-on .disc-pos { animation: vn-slide .9s .35s var(--ease-out) forwards; }
html.wc .hero-info > * { opacity: 0; transform: translateY(10px); }
html.wc .hero.is-on .hero-info > * { animation: vn-rise .7s .6s var(--ease-out) forwards; }
@keyframes vn-rise { to { opacity: 1; transform: none; } }
@keyframes vn-slide { to { opacity: 1; translate: 0 0; } }
@media (min-width: 900px) { html.wc .disc-pos { translate: -40% 0; } }

/* ============================================================
   ② A 面曲目（B3）：唱片背面的曲目表＋溝槽特寫
   抬頭＝墨底方章「SIDE A」（背面印的面別章）＋目錄號＋片名＋內頁短文，下緣四色條紋——跟海報的直排色塊、
   點唱機的燈牌都不同公式。曲目列＝單曲封套（照片＋裡面那張 45 轉）＋「A1 ····· 4:33」引線＋曲名＋錄音日期，
   內文手機跨滿兩欄（不擠在照片旁邊）、桌機在右欄。
   狀態（fx.js 掛）：走過＝實心墨點、45 轉露出一點；正在播＝橘點（脈衝是 transform）＋芥黃底帶＋45 轉滑出；
   還沒到＝空心圈、45 轉收在封套裡。**字永遠墨色全不透明**（B2 用 .45 透明度區分，未到的軌讀不清楚——撤掉）。
   ============================================================ */
.story { background: var(--paper); padding-top: clamp(2.4rem, 8vw, 5rem); }
/* 評審第 2 輪：倒數到 A 面標題手機還有 151px（海報 min-height:100svh 置中，多出來的高度一半落在海報下面）→ 手機海報不再撐滿一屏、
   上下留白收緊，下一區的 SIDE A 章從第一屏底部露出一點當捲動提示；桌機海報照舊一屏，只收底部留白與 A 面上緣。目標：手機 ≤96px */
@media (max-width: 899px) { .hero { min-height: auto; padding-bottom: 1.3rem; } .story { padding-top: 1.7rem; } }
@media (min-width: 900px) { .hero { padding-bottom: 2.2rem; } .story { padding-top: 3rem; } }   /* 評審第 1 輪：海報倒數到 SIDE A 之間空了約 170px，第一次捲動像斷掉 */
.story-sheet { max-width: 60rem; margin-inline: auto; }
.sh-side { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem 1.1rem; margin-bottom: clamp(1.8rem, 5vw, 2.8rem); padding-bottom: 1.3rem; }
.sh-side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--stripes); }
/* 面別章：墨底、芥黃細框；SIDE＝芥黃窄體、A＝封套紙色 Bodoni（墨底上的字一律淺色：B2 橘底墨字 4.45 不到 4.5，換底不換字） */
.shs-no { flex: none; margin: 0; width: 4.6rem; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: .2rem; border-radius: 3px; background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4.5px var(--mustard), 3px 3px 0 var(--orange); line-height: 1; }
.shs-no b { font-family: var(--font-narrow); font-weight: 700; font-size: 12.8px; letter-spacing: .3em; padding-left: .3em; color: var(--mustard); }
.shs-no em { font-style: normal; font-family: var(--font-display); font-weight: 900; font-variation-settings: "opsz" 96; font-size: 2.6rem; color: var(--paper); }
.shs-txt { display: grid; gap: .25rem; min-width: 0; }
.shs-k { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .55em; font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .14em; color: var(--ink-soft); }
.shs-k i { font-style: normal; }
.shs-note { margin: .25rem 0 0; font-size: max(17px, 1.02rem); line-height: 1.75; letter-spacing: .04em; color: var(--ink-soft); }
.shs-note:empty { display: none; }

.tracks { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .85rem; }
.groove-rail { position: relative; }
/* 溝槽特寫：沿半徑方向切一條（往下＝往唱片中心走），溝紋是圓心在很下面的同心弧；中線一條不轉的反光。
   紋路週期 3.2px、平滑三角波（硬邊細紋在 2×／3× 會起 moiré，B2 量過） */
.gr-grooves {
  position: absolute; inset: 0 .1rem;
  border-radius: 1.2rem / 1.6rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 22%, rgba(255, 240, 210, .07) 40%, rgba(255, 240, 210, .18) 50%, rgba(255, 240, 210, .07) 60%, transparent 78%, rgba(0, 0, 0, .55)),
    repeating-radial-gradient(circle at 50% calc(100% + 40rem), #1b1816 0, #2b2520 1.6px, #1b1816 3.2px),
    var(--vinyl);
  box-shadow: inset 0 0 0 1px #0c0b0a, 0 1px 0 rgba(255, 255, 255, .45), 0 10px 18px -12px rgba(0, 0, 0, .6);
}
/* 曲間空溝：比較亮、比較平的一圈 */
.gr-gap { position: absolute; left: 0; right: 0; height: 12px; translate: 0 -50%; background: linear-gradient(180deg, transparent, rgba(255, 240, 210, .2) 30% 70%, transparent); }
/* 唱針＝唱頭俯視（銀色唱頭殼＋墨色唱頭、橘色標＋針尖），上面拖一段唱臂管。只動 transform（fx.js） */
.gr-needle { position: absolute; left: 50%; top: 0; z-index: 2; width: 2.5rem; height: 3.7rem; margin-left: -1.25rem; will-change: transform; }
.gn-arm { position: absolute; left: 50%; bottom: 60%; width: 5px; height: 2.6rem; margin-left: -2.5px; border-radius: 3px; background: linear-gradient(90deg, #7d766b, #f1ebdf 45%, #a39b8d); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.gn-shell { position: absolute; left: 0; right: 0; top: 1rem; bottom: .45rem; border-radius: .4rem .4rem .55rem .55rem; background: linear-gradient(90deg, #6f685e, #d8d0c1 42%, #f6f0e4 52%, #9a9283); box-shadow: 0 7px 12px -3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35); }
.gn-shell::before { content: ""; position: absolute; left: 20%; right: 20%; top: 26%; bottom: 14%; border-radius: 2px; background: linear-gradient(180deg, var(--orange) 0 30%, var(--ink) 30%); }
.gn-shell::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px solid #e9e2d4; }
.tracks:not(.is-scrub) .gr-needle { top: auto; bottom: 0; }

.track-list { list-style: none; margin: 0; padding: 0; display: grid; }
.trk {
  --cv: min(4rem, 17vw);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: calc(var(--cv) * 1.32) minmax(0, 1fr);
  grid-template-areas: "cov head" "txt txt";
  column-gap: .6rem; row-gap: .75rem; align-items: start;
  padding: 1.35rem .2rem 1.45rem .55rem;
  border-top: 1px solid var(--hairline);
}
.trk:first-child { border-top: 0; }
/* now-playing 底帶（只動 opacity；字不受影響） */
.trk::before { content: ""; position: absolute; inset: .3rem -.25rem .3rem -.3rem; z-index: -1; border-radius: 3px; background: linear-gradient(90deg, rgba(224, 179, 59, .36), rgba(224, 179, 59, .14) 70%, rgba(224, 179, 59, .04)); box-shadow: inset 4px 0 0 var(--orange); opacity: 0; transition: opacity .45s ease; }
.trk.is-playing::before { opacity: 1; }
/* 單曲封套＋裡面的 45 轉 */
.trk-cover { grid-area: cov; position: relative; width: var(--cv); aspect-ratio: 1; }
.trk-45 {
  position: absolute; inset: 5%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 4%, var(--orange) 4.6% 30%, var(--gold) 30.6% 31.4%, #0f0d0c 32% 34%, transparent 35%),
    repeating-radial-gradient(circle, #1b1816 0, #2b2520 1.4px, #1b1816 2.8px),
    var(--vinyl);
  box-shadow: 0 0 0 1px #0c0b0a, 0 4px 8px -4px rgba(0, 0, 0, .6);
  transform: translateX(var(--out, 0%)) rotate(var(--rot, 0deg));
  transition: transform .8s var(--ease-out);
}
.trk.is-reached .trk-45 { --out: 14%; --rot: 50deg; }
.trk.is-playing .trk-45 { --out: 30%; --rot: 190deg; }
.trk-sleeve { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; background: var(--green); box-shadow: 0 9px 14px -9px rgba(34, 29, 24, .65), 0 0 0 1px rgba(34, 29, 24, .28); }
.trk-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.2) saturate(.86) contrast(.92) brightness(1.03); }
/* 封套左緣的四色細條（跟海報封套同一套印刷語言） */
.trk-sleeve::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: var(--stripes-x); box-shadow: 1px 0 0 rgba(34, 29, 24, .3); }
.trk-sleeve.is-noimg img { visibility: hidden; }
.trk-cover-no { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--ink); opacity: 0; }
.trk-sleeve.is-noimg { background: radial-gradient(circle, var(--mustard) 0 30%, var(--orange) 31% 100%); }
.trk-sleeve.is-noimg .trk-cover-no { opacity: 1; }

.trk-head { grid-area: head; min-width: 0; max-width: 36rem; display: grid; gap: .1rem; }
.trk-meta { margin: 0; display: flex; align-items: center; gap: .45rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .1em; color: var(--ink); }
/* 曲目號用窄體粗字（Bodoni 的 1 在粗字重像 I，「A1」會讀成「Al」） */
.trk-no { flex: none; font-family: var(--font-narrow); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: .04em; }
/* 狀態點：還沒到＝空心圈；走過＝實心墨；正在播＝橘點＋外圈脈衝（脈衝只動 transform／opacity） */
.trk-dot { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .3s ease; }
.trk.is-reached .trk-dot { background: var(--ink); }
.trk.is-playing .trk-dot { background: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange-press); }
.trk-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.trk.is-playing .trk-dot::after { animation: vn-ping 1.6s ease-out infinite; }
@keyframes vn-ping { 0% { opacity: .85; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.45); } }
/* 曲目表的點線引線（A1 ········ 4:33） */
.trk-lead { flex: 1 1 auto; min-width: 1rem; height: 3px; align-self: center; translate: 0 .15em; background: radial-gradient(circle, var(--ink) 0 1.1px, transparent 1.5px) 0 50% / 7px 3px repeat-x; }
.trk-time { flex: none; font-variant-numeric: tabular-nums; }
.trk-title { margin: .2rem 0 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.38; letter-spacing: .05em; color: var(--ink); text-wrap: balance; }
.trk-date { margin: 0; font-family: var(--font-narrow); font-weight: 700; font-size: max(15px, .9rem); letter-spacing: .12em; color: var(--ink-soft); }
.trk-date::before { content: "REC. "; }
.trk-text { grid-area: txt; margin: 0; font-size: max(17px, 1.05rem); line-height: 1.95; color: var(--ink); }
.story-runout { margin: 1.4rem 1.1rem 0 calc(2.3rem + .85rem); display: flex; align-items: center; gap: .8rem; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .22em; color: var(--ink-soft); }
.story-runout i { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 10px); }
@media (min-width: 900px) {
  .sh-side { gap: 1rem 1.6rem; }
  .shs-no { width: 6.2rem; }
  .shs-no em { font-size: 3.5rem; }
  .shs-note { max-width: 34em; }
  .tracks { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.6rem; }
  .gr-needle { width: 3.3rem; height: 4.8rem; margin-left: -1.65rem; }
  .gn-arm { width: 6px; margin-left: -3px; height: 3.4rem; }
  .gn-shell { top: 1.3rem; bottom: .6rem; }
  .trk { --cv: 8rem; grid-template-areas: "cov head" "cov txt"; column-gap: 1.4rem; row-gap: .55rem; padding: 1.9rem .4rem 2rem 1rem; }
  .trk-meta { font-size: 1rem; }
  .trk-no { font-size: 1.75rem; }
  .trk-text { max-width: 34em; }
  .story-runout { margin-left: calc(4.6rem + 1.6rem); }
}

/* ============================================================
   ③ 冰果室點唱機選曲牆（B3）
   箱體＝木紋（不轉的靜態層，可以疊紋理）＋左右鍍鉻側柱＋拱頂（墨底燈牌、外圈四色燈條）＋一排燈泡＋玻璃面板＋底座（投幣口、喇叭網）。
   曲名條＝左正方縮圖＋右芥黃底墨字（上下一條橘色細線＝老點唱機的曲名卡印法），「A1」是鍍鉻選曲鈕。
   抬頭公式＝圓角燈牌＋拱頂，跟 A 面的墨底方章、唱片背面的目錄號欄都不同。
   ============================================================ */
.gallery { background: var(--green); background-image: radial-gradient(90% 60% at 50% 40%, rgba(224, 179, 59, .1), transparent 70%); }
.jukebox {
  position: relative;
  max-width: 62rem; margin-inline: auto;
  padding: clamp(.8rem, 2.4vw, 1.4rem) clamp(1.1rem, 3vw, 1.9rem) 0;
  border-radius: .7rem .7rem 1.4rem 1.4rem;   /* 評審第 1 輪：平頂（拱頂是美式 Wurlitzer 的語彙） */
  background:
    radial-gradient(120% 40% at 50% 0, rgba(255, 220, 170, .14), transparent 60%),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .11) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .06) 9px 11px, transparent 11px 23px, rgba(0, 0, 0, .06) 23px 24px, transparent 24px 37px),
    linear-gradient(135deg, var(--wood-hi), var(--wood) 55%, #46301e);
  box-shadow: 0 0 0 3px #2b1c11, inset 0 2px 0 rgba(255, 220, 170, .2), 0 40px 60px -30px rgba(0, 0, 0, .75);
}
/* 木箱兩側的木條（不再是鍍鉻側柱） */
.jukebox::before, .jukebox::after {
  content: ""; position: absolute; top: 1rem; bottom: 4.2rem; width: clamp(.45rem, 1.1vw, .7rem);
  border-radius: 2px;
  background: linear-gradient(90deg, #3b2716, #8a5e3c 45%, #4a301c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.jukebox::before { left: clamp(.3rem, .8vw, .55rem); }
.jukebox::after { right: clamp(.3rem, .8vw, .55rem); }
.jb-crown {
  position: relative;
  text-align: center;
  padding: 1.5rem 1.4rem 1.3rem;
  border-radius: 4px;
  /* 平頂鐵皮招牌：墨綠烤漆、四角鉚釘、手漆的奶油框線，鐵皮邊有一點鏽 */
  background:
    radial-gradient(circle at 12px 12px, #d9d1c2 0 2.6px, #6b6359 3.2px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #d9d1c2 0 2.6px, #6b6359 3.2px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #d9d1c2 0 2.6px, #6b6359 3.2px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #d9d1c2 0 2.6px, #6b6359 3.2px, transparent 4px),
    radial-gradient(120% 70% at 50% 0, rgba(255, 255, 255, .1), transparent 60%),
    var(--green);
  box-shadow: inset 0 0 0 5px var(--green), inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--green), inset 0 -3px 6px rgba(120, 60, 20, .35), 0 3px 0 #1d2e24;
  color: var(--paper);
}
.jb-sign { margin: 0 auto .55rem; display: inline-flex; align-items: center; gap: .6rem; padding: .25rem 1rem; border-radius: 3px; background: var(--mustard); color: var(--ink); font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .18em; box-shadow: 0 0 0 2px var(--ink); }
.jb-sign i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.jb-crown .section-title { color: var(--paper); }
.jb-sub { margin: .35rem 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .5em; font-family: var(--font-tc); font-size: max(15px, .95rem); letter-spacing: .14em; color: #f3e9d2; }
.jb-sub i { font-style: normal; }
/* 一串燈泡（廟口、冰果室門口那種紅黃綠白輪流的小燈泡，掛在一條電線上）：底層是沒亮的，上層（span）是亮的，進場由左到右掃開 */
.jb-lamps { position: relative; margin: .75rem .6rem .1rem; height: 18px; background: linear-gradient(180deg, transparent 0 3px, #1a120b 3px 4.5px, transparent 4.5px), radial-gradient(ellipse 4px 5px at 50% 11px, #5e5040 0 70%, transparent 80%) 0 0 / 22px 18px repeat-x; }
.jb-lamps span { position: absolute; inset: 0; background:
  radial-gradient(ellipse 4.5px 5.5px at 11px 11px, #fff3e0 0 30%, #e8452c 60%, rgba(232, 69, 44, .35) 85%, transparent 100%) 0 0 / 88px 18px repeat-x,
  radial-gradient(ellipse 4.5px 5.5px at 33px 11px, #fffbe6 0 30%, #f2c230 60%, rgba(242, 194, 48, .35) 85%, transparent 100%) 0 0 / 88px 18px repeat-x,
  radial-gradient(ellipse 4.5px 5.5px at 55px 11px, #f2fff0 0 30%, #3fa45c 60%, rgba(63, 164, 92, .35) 85%, transparent 100%) 0 0 / 88px 18px repeat-x,
  radial-gradient(ellipse 4.5px 5.5px at 77px 11px, #ffffff 0 35%, #f6ead0 65%, rgba(246, 234, 208, .4) 85%, transparent 100%) 0 0 / 88px 18px repeat-x; }
html.wc .jb-lamps span { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) .1s; }
html.wc .jukebox.is-on .jb-lamps span { clip-path: inset(0 0 0 0); }
/* 玻璃面板：淺奶油底＋不擋點擊的斜向反光 */
.jb-glass { position: relative; margin-top: .7rem; padding: .8rem; border-radius: .6rem; background: linear-gradient(180deg, #efe3c4, var(--paper-lo)); box-shadow: 0 0 0 3px #b8b0a2, 0 0 0 5px #3a2a1a, inset 0 2px 8px rgba(0, 0, 0, .28); }
.jb-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0 12%, transparent 12% 58%, rgba(255, 255, 255, .1) 58% 63%, transparent 63%); }
.jb-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .6rem; }
.jb { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: stretch; border-radius: 3px; background: #2b2018; box-shadow: 0 2px 0 rgba(34, 29, 24, .35); cursor: zoom-in; transition: transform .25s ease; -webkit-tap-highlight-color: transparent; }
.jb:nth-child(even) { margin-top: 1.1rem; }
.jb:focus { outline: none; }
.jb:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--orange); }
.jb-pic { position: relative; aspect-ratio: 1; background: var(--green); overflow: hidden; border-radius: 3px 0 0 3px; }
.jb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.16) saturate(.9) contrast(.94); }
.jb-pic.is-noimg img { visibility: hidden; }
.jb-pic.is-noimg { background: radial-gradient(circle, var(--orange) 0 16%, var(--vinyl) 17% 60%, var(--green) 61%); }
/* 曲名卡：芥黃底墨字、上下橘色細線；背光＝內層 glow（亮的時候才有） */
.jb-cap { position: relative; display: grid; align-content: center; justify-items: start; gap: .35rem; padding: .55rem .55rem .55rem .6rem; min-width: 0; border-radius: 0 3px 3px 0; background: var(--mustard); color: var(--ink); box-shadow: inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange), inset 0 0 16px rgba(255, 244, 205, .75); transition: background-color .5s ease, box-shadow .5s ease; transition-delay: var(--lit-d, 0ms); }
/* 選曲鈕：鍍鉻方鈕（凸起 3px），按下＝沉下去 */
.jb-key { display: inline-grid; place-items: center; min-width: 2.3em; padding: .22em .45em .18em; border-radius: 4px; font-family: var(--font-narrow); font-weight: 700; font-size: 15px; letter-spacing: .08em; line-height: 1.1; color: var(--ink); background: linear-gradient(180deg, #fffaf0, #d9d1c2 60%, #bdb3a2); box-shadow: 0 3px 0 #6b6359, 0 3px 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(34, 29, 24, .35); transition: transform .15s ease, box-shadow .15s ease; }
.jb-title { display: grid; gap: .05rem; font-size: max(15px, .95rem); line-height: 1.4; letter-spacing: .04em; overflow-wrap: anywhere; word-break: keep-all; }
.jb-seg:first-child { font-weight: 700; }
/* 手機兩欄：縮圖收窄一點、曲名卡留白收一點，四個字的店名（南方唱片）放得進一行 */
@media (max-width: 899px) {
  .jb { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .jb-cap { padding: .5rem .4rem .5rem .5rem; }
  .jb-title { letter-spacing: 0; }
}
/* 空白曲名卡：沒印照片的那一格，奶油底＋橘線，點了跳到點歌卡。
   跟左鄰同高靠 grid 預設的 align-self: stretch；**不准寫 min-height: 100%**（評審第 2 輪 P0：WebKit 把自動高度列裡的百分比 min-height
   回饋進列高，每次重排再長一點，第 07 張照片被拉成 140×483 的直條、溢出木框——fix2 的 WebKit 高度穩定斷言守著） */
.jb-slot { position: relative; display: grid; align-content: center; justify-items: start; gap: .4rem; padding: .7rem .7rem .7rem .8rem; border-radius: 3px; text-decoration: none; color: var(--ink); background: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(34, 29, 24, .12) 1.55rem calc(1.55rem + 1px)), var(--paper-hi); box-shadow: inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange), 0 0 0 1.5px rgba(34, 29, 24, .35), 0 2px 0 rgba(34, 29, 24, .3); transition: transform .25s ease; }
.jb-slot:nth-child(even) { margin-top: 1.1rem; }
.jb-go::after { content: " ↓"; font-family: var(--font-narrow); }
.jb-slot .jb-go { font-weight: 400; color: var(--ink-soft); }
.jb-slot:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--orange); }
.jb-slot:active .jb-key { transform: translateY(3px); box-shadow: 0 0 0 #6b6359, 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(34, 29, 24, .35); }
/* 還沒亮：背光關著（暗芥黃、沒有 glow） */
html.wc .jb:not(.is-lit) .jb-cap { background: #b19a5f; box-shadow: inset 0 3px 0 #9a5a32, inset 0 -3px 0 #9a5a32, inset 0 0 0 rgba(255, 244, 205, 0); }
.jb:active .jb-key { transform: translateY(3px); box-shadow: 0 0 0 #6b6359, 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(34, 29, 24, .35); }
@media (hover: hover) and (pointer: fine) {
  .jb:hover .jb-cap { background: #f2c955; box-shadow: inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange), inset 0 0 22px rgba(255, 250, 225, .95), 0 0 18px rgba(255, 214, 110, .55); transition-delay: 0ms; }
  .jb-slot:hover { transform: translateY(-2px); }
  .jb:hover .jb-key, .jb-slot:hover .jb-key { transform: translateY(3px); box-shadow: 0 0 0 #6b6359, 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(34, 29, 24, .35); }
}
/* 底座：投幣口＋提示＋喇叭網 */
.jb-deck { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem .9rem; padding: .9rem .5rem 1.1rem; }
.jb-coin { width: 2.2rem; height: 2.2rem; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(180deg, #fffaf0, #bdb3a2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 0 #3a2a1a; }
.jb-coin i { width: 4px; height: 1.3rem; border-radius: 2px; background: #221d18; }
.jb-foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; color: #f3e9d2; }
.jb-foot .tc { font-size: max(15px, .95rem); letter-spacing: .12em; }
.jb-grille { grid-column: 1 / -1; height: 2.4rem; border-radius: .5rem; background: repeating-linear-gradient(90deg, #1a120b 0 3px, #5b3a24 3px 7px), #2b1c11; box-shadow: inset 0 0 0 2px #b8b0a2, inset 0 0 0 4px #2b1c11, inset 0 6px 10px rgba(0, 0, 0, .5); }
@media (min-width: 900px) {
  .jb-glass { padding: 1.2rem; }
  .jb-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .jb:nth-child(even) { margin-top: 0; }
  .jb:nth-child(4n+2), .jb:nth-child(4n+4) { margin-top: 1.4rem; }
  .jb-slot:nth-child(even) { margin-top: 0; }
  .jb-slot:nth-child(4n+2), .jb-slot:nth-child(4n+4) { margin-top: 1.4rem; }
  .jb-deck { grid-template-columns: auto minmax(0, 1fr) 40%; padding: 1rem .6rem 1.3rem; }
  .jb-grille { grid-column: 3; }
}

/* ============ ③b 唱片行的電視機（B3）：木殼、鍍鉻框圓角映像管、選台旋鈕、喇叭網 ============ */
.video { background: var(--paper-lo); }
.sh-tv { max-width: 48rem; margin: 0 auto 1.4rem; display: grid; justify-items: start; gap: .35rem; }
.sht-k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; color: var(--ink-soft); }
.sht-air { display: inline-flex; align-items: center; gap: .5em; padding: .25em .7em .2em; border-radius: 3px; background: var(--ink); color: var(--paper); letter-spacing: .24em; }
.sht-air::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px rgba(217, 98, 43, .3), 0 0 8px var(--orange); }
.tv {
  max-width: 48rem; margin-inline: auto;
  display: grid; gap: .9rem;
  padding: clamp(.9rem, 3vw, 1.4rem);
  border-radius: 1.6rem;
  background:
    radial-gradient(120% 60% at 30% 0, rgba(255, 220, 170, .14), transparent 60%),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .11) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .06) 9px 11px, transparent 11px 23px),
    linear-gradient(135deg, var(--wood-hi), var(--wood) 60%, #46301e);
  box-shadow: 0 0 0 3px #2b1c11, inset 0 2px 0 rgba(255, 220, 170, .22), 0 34px 50px -26px rgba(0, 0, 0, .7);
}
/* 映像管：鍍鉻細框＋黑色內框，四角很圓（老電視的鼓面） */
.tv-screen { position: relative; padding: .65rem; border-radius: 2.4rem / 2rem; background: linear-gradient(180deg, #2b2622, #0c0b0a); box-shadow: inset 0 0 0 2px #cfc7b8, inset 0 0 0 3px #6d665c, inset 0 0 0 6px #1a1715, 0 2px 0 rgba(255, 220, 170, .25); }
.video-frame { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.9rem / 1.55rem; }
.video-frame[data-ratio="portrait"] { aspect-ratio: 9 / 16; max-width: 22rem; margin-inline: auto; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 0; border: 0; background: #0c0b0a; cursor: pointer; }
.video-poster { width: 100%; height: 100%; object-fit: cover; opacity: .92; filter: sepia(.18) saturate(.88) contrast(.95); }
.is-noposter .video-poster { display: none; }
.is-noposter .video-facade { background: repeating-linear-gradient(0deg, #1a1715 0 2px, #24201c 2px 4px); }
.video-play-ico { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(243, 233, 210, .9), 0 10px 22px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.video-play-ico::after { content: ""; position: absolute; left: 30px; top: 24px; border-left: 22px solid var(--ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-facade:hover .video-play-ico { transform: translate(-50%, -50%) scale(1.06); }
.video-facade:focus-visible { outline: 3px solid var(--mustard); outline-offset: -6px; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 玻璃鼓面反光＋四角暗角（不擋點擊） */
.tv-glass { position: absolute; inset: .65rem; border-radius: 1.9rem / 1.55rem; pointer-events: none; background: radial-gradient(90% 70% at 28% 12%, rgba(255, 255, 255, .17), transparent 46%), radial-gradient(closest-side, transparent 72%, rgba(0, 0, 0, .32)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* 控制面板：手機在螢幕下面一排、桌機在右側一欄 */
.tv-panel { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: 0 .3rem .2rem; }
.tv-brand { margin: 0; display: grid; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 15px; letter-spacing: .04em; line-height: 1.05; color: #f3e9d2; }
.tv-brand small { font-family: var(--font-narrow); font-style: normal; font-weight: 700; font-size: 12.8px; letter-spacing: .2em; color: #e3d3ae; }
/* 選台旋鈕：鍍鉻圓盤＋一圈刻度、指針停在 3 台 */
.tv-dial { position: relative; width: 3rem; height: 3rem; border-radius: 50%; background: repeating-conic-gradient(from -4deg, #2b1c11 0 2deg, transparent 2deg 30deg), radial-gradient(circle, #fffaf0 0 46%, #bdb3a2 62%, #6d665c 66%, #e9e2d4 70% 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 3px 6px rgba(0, 0, 0, .45); }
.tv-dial i { position: absolute; left: 50%; top: 14%; width: 3px; height: 36%; margin-left: -1.5px; border-radius: 2px; background: var(--orange); transform-origin: 50% 100%; transform: rotate(60deg); }
.tv-knobs { display: flex; gap: .5rem; }
.tv-knobs i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffaf0, #bdb3a2 55%, #6d665c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .45); }
.tv-speaker { height: 2.4rem; border-radius: .5rem; background: repeating-linear-gradient(90deg, #1a120b 0 3px, #5b3a24 3px 7px), #2b1c11; box-shadow: inset 0 0 0 2px #b8b0a2, inset 0 0 0 4px #2b1c11, inset 0 6px 10px rgba(0, 0, 0, .5); }
@media (max-width: 380px) { .tv-knobs { display: none; } .tv-panel { grid-template-columns: auto auto minmax(0, 1fr); } }
@media (min-width: 900px) {
  .tv { grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: stretch; gap: 1.2rem; }
  .tv-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(3rem, 1fr); justify-items: center; align-content: start; gap: 1.1rem; padding: .6rem 0; }
  .tv-brand { justify-items: center; text-align: center; }
  .tv-dial { width: 4.6rem; height: 4.6rem; }
  .tv-speaker { width: 100%; height: auto; align-self: stretch; background: repeating-linear-gradient(0deg, #1a120b 0 3px, #5b3a24 3px 7px), #2b1c11; }
}

/* ============================================================
   ④ 唱片背面（B3）：七〇年代台灣唱片的封底
   抬頭＝目錄號欄（含局版台音字號）＋片名＋雙線（跟 A 面的方章、點唱機的燈牌、電視的 ON AIR 都不同公式）。
   ============================================================ */
.details { background: var(--paper-lo); }
.back {
  position: relative;
  max-width: 64rem; margin-inline: auto;
  padding: clamp(1.3rem, 4vw, 2.8rem);
  background: var(--paper);
  box-shadow: 0 30px 46px -26px rgba(34, 29, 24, .55), 0 0 0 1px rgba(34, 29, 24, .15);
  overflow: hidden;
}
/* 封底的四色條紋（右緣直條）＋唱片在裡面放久了磨出的圓痕（裝飾，不擋點擊） */
.back::before { content: ""; position: absolute; right: -18%; top: 6%; width: 82%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(34, 29, 24, .045); pointer-events: none; }
.back::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: clamp(6px, 1.2vw, 12px); background: var(--stripes-x); pointer-events: none; }
.bk-head { position: relative; display: grid; gap: .35rem; padding-bottom: 1rem; border-bottom: 4px double var(--ink); margin-bottom: 1.5rem; }
.bk-cat { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; color: var(--ink); }
.bk-cat span + span { position: relative; }
.bk-gio { position: absolute; right: 0; bottom: 1rem; margin: 0; font-family: var(--font-tc); font-size: 13px; letter-spacing: .14em; color: var(--ink-soft); writing-mode: horizontal-tb; }
@media (max-width: 899px) { .bk-gio { position: static; } }
.bk-gio:empty { display: none; }
.bk-k { margin: 0; display: flex; flex-wrap: wrap; gap: 0 .5em; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; color: var(--ink-soft); }
.bk-k i { font-style: normal; }
.bk-k .tc { letter-spacing: .14em; }
.bk-grid { position: relative; display: grid; gap: 2.2rem; }
/* 欄位小標（RELEASE 這類英文欄名是可讀的欄位名，B3 放大到 15px） */
.bk-sub { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7em; font-family: var(--font-narrow); font-weight: 700; font-size: 15px; letter-spacing: .24em; color: var(--ink); }
.bk-sub .tc { font-size: max(15px, 1rem); letter-spacing: .12em; }
/* 流程＝SIDE A／SIDE B 曲目表 */
.event-list { margin: 0; }
.event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px dotted rgba(34, 29, 24, .4); }
.event-row.is-side-a::before, .event-row.is-side-b::before { grid-column: 1 / -1; justify-self: start; margin-bottom: .55rem; padding: .2em .6em .15em; border-radius: 2px; background: var(--ink); color: var(--paper); font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .26em; }
.event-row.is-side-a::before { content: "SIDE A"; }
.event-row.is-side-b::before { content: "SIDE B"; margin-top: .9rem; }
.event-row dt { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .4rem; align-items: baseline; }
.ev-no { font-family: var(--font-narrow); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.ev-main { display: grid; min-width: 0; }
.ev-name { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.ev-name strong { flex: 0 1 auto; font-weight: 700; font-size: max(17px, 1.06rem); letter-spacing: .08em; }
.ev-lead { flex: 1 1 auto; min-width: .8rem; height: 3px; background: radial-gradient(circle, var(--ink) 0 1.1px, transparent 1.5px) 0 50% / 7px 3px repeat-x; }
.ev-note { font-size: max(15px, .95rem); color: var(--ink-soft); line-height: 1.6; }
.event-row dd { margin: 0; font-family: var(--font-narrow); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
/* 發行資訊：窄體欄名（中文＋英文小字）＋內容 */
.bk-meta { margin: 0; display: grid; }
.bk-meta > div { display: grid; gap: .15rem; padding: .6rem 0; border-bottom: 1px dotted rgba(34, 29, 24, .4); }
.bk-meta > div[hidden] { display: none; }
.bk-meta dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7em; font-size: max(15px, .95rem); letter-spacing: .1em; color: var(--ink-soft); line-height: 1.5; }
.bk-meta dt small { font-family: var(--font-narrow); font-weight: 700; font-size: 12.8px; letter-spacing: .14em; }
.bk-meta dd { margin: 0; font-size: max(15px, 1rem); line-height: 1.7; display: grid; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.details-note { color: var(--ink-soft); }
.details-note:empty { display: none; }
.parents { margin: 0; white-space: pre-line; }
/* 下排：牆曆＋預購單 */
.bk-lower { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.2rem; }
/* 上架預告貼紙（評審第 1 輪取代「本月新片」牆曆——7 欄月曆格是標準模板月曆元件換皮）：
   一張包著收縮膜的新片一角（墨綠封套＋四色條紋、膜上兩道反光斜條），膜上貼一張芥黃發行貼紙：大字日期、星期時段、場地，角上一枚「首賣」圓章 */
.hype-wrap { position: relative; display: grid; padding: 1.4rem 0 1.2rem; }
.hype-wrap[hidden] { display: none; }
.hype-shrink { position: absolute; inset: 0 8% 0 0; border-radius: 2px; overflow: hidden; background: linear-gradient(90deg, transparent 0 1.4rem, rgba(0, 0, 0, .15) 1.4rem 1.5rem, transparent 1.5rem), var(--green); box-shadow: 0 16px 24px -14px rgba(34, 29, 24, .7); }
.hs-cover { position: absolute; left: 0; top: 0; bottom: 0; width: 1.4rem; background: var(--stripes); }
.hs-glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .16) 20% 24%, transparent 27% 58%, rgba(255, 255, 255, .1) 60% 61.5%, transparent 63%); }
.hype {
  position: relative; z-index: 1;
  justify-self: center; width: min(88%, 21rem); margin: .4rem 4% .4rem 0;
  padding: 1rem 1.25rem 1.15rem; border-radius: 1.1rem;
  background: radial-gradient(120% 80% at 20% 0, rgba(255, 255, 255, .35), transparent 55%), var(--mustard);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--mustard), inset 0 0 0 4.5px var(--ink), 0 3px 0 rgba(34, 29, 24, .25), 0 10px 16px -8px rgba(0, 0, 0, .55);
  rotate: -3deg;
}
.hype::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .22) 33% 37%, transparent 40%); }
.hy-k { margin: 0 0 .5rem; padding-bottom: .4rem; display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); }
.hy-k b { font-size: 1.45rem; letter-spacing: .14em; line-height: 1.2; }
.hy-k small { font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .2em; }
.hy-date { margin: 0; display: flex; align-items: baseline; gap: .1em; line-height: 1; }
.hy-n { font-family: var(--font-narrow); font-weight: 700; font-size: clamp(3.4rem, 16vw, 4.6rem); letter-spacing: -.01em; }   /* 窄體：Bodoni 粗字的 1 像 I（B3 同一個雷） */
.hy-u { font-family: var(--font-head); font-size: clamp(1.5rem, 6.5vw, 1.9rem); margin-right: .12em; }
.hy-when { margin: .55rem 0 0; font-weight: 700; font-size: max(17px, 1.12rem); letter-spacing: .08em; line-height: 1.5; }
.hy-where { margin: .1rem 0 0; font-size: max(16px, 1.02rem); letter-spacing: .08em; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.hy-where::before { content: "在 "; }
.hy-where:empty { display: none; }
.hy-note { margin: .15rem 0 0; font-size: 15px; letter-spacing: .08em; line-height: 1.5; }
.hy-note:empty { display: none; }
.hy-dot { position: absolute; right: -1rem; bottom: -1.3rem; margin: 0; width: 4.1rem; height: 4.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink); box-shadow: inset 0 0 0 3px var(--orange), inset 0 0 0 4px var(--gold), 0 4px 8px -2px rgba(0, 0, 0, .45); rotate: 14deg; }
.hy-dot span { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: .1em; }
/* 預購單：訂購聯（左緣齒孔、虛線框）、序號章 */
.reserve { position: relative; padding: 1.3rem 1.2rem 1.4rem 1.6rem; border: 2px dashed var(--ink); background: var(--paper-hi); display: grid; gap: .55rem; align-content: start; }
.reserve::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 8px; background: radial-gradient(circle, var(--paper-lo) 0 3px, transparent 3.5px) 50% 0 / 8px 14px repeat-y; pointer-events: none; }
.rs-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding-right: 4.6rem; }
.rs-head b { font-family: var(--font-head); font-weight: 400; font-size: 1.7rem; letter-spacing: .14em; }
.rs-head span { font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; }
.rs-who { margin: 0; display: flex; align-items: baseline; gap: .5rem; padding-bottom: .35rem; border-bottom: 1.5px solid rgba(34, 29, 24, .55); }
.rs-who small { font-size: max(15px, .95rem); letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; }
.rs-who b { font-size: 1.4rem; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.rs-form { margin: .1rem 0 0; display: grid; }
.rs-form > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid rgba(34, 29, 24, .22); }
.rs-form dt { font-size: max(15px, .95rem); letter-spacing: .12em; color: var(--ink-soft); }
.rs-form dd { margin: 0; font-size: max(15px, .98rem); line-height: 1.6; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.rs-note { margin: 0; font-size: max(15px, .95rem); line-height: 1.7; color: var(--ink-soft); }
.calendar-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.calendar-actions .btn { flex: 1 1 auto; min-height: 48px; white-space: nowrap; }
/* 窄螢幕（320）「加入 Outlook／其他日曆」放不下一行：按鈕字折行、置中，不再把預購單撐出封底（評審第 2 輪） */
@media (max-width: 359px) { .calendar-actions .btn { white-space: normal; text-align: center; word-break: keep-all; } }
.rs-cat { white-space: nowrap; }
.calendar-actions .btn:active { transform: translateY(1px); }
.calendar-actions .btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
/* 序號章：橘色圓框、墨字（裝飾，aria-hidden） */
.rs-stamp { position: absolute; right: .9rem; top: .8rem; margin: 0; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .05rem; color: var(--ink); box-shadow: inset 0 0 0 2px var(--orange), inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--orange); transform: rotate(-12deg); line-height: 1.1; }
.rs-stamp small { font-size: 12.8px; letter-spacing: .1em; }
.rs-stamp b { font-family: var(--font-narrow); font-weight: 700; font-size: 12.8px; letter-spacing: .04em; white-space: nowrap; }
.rs-stamp[hidden] { display: none; }
@media (min-width: 900px) {
  .bk-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
  .bk-lower { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
  .bk-lower.is-solo { grid-template-columns: 1fr; }
  .bk-meta > div { grid-template-columns: 7.4em minmax(0, 1fr); gap: .8rem; }
  .bk-meta dt { display: grid; align-content: start; }
}

/* ============================================================
   ④b 彩膠內袋（B4）
   抬頭＝唱片箱的分隔卡（墨綠卡身＋芥黃索引耳）——跟上一區「唱片背面欄位」、下一區「門牌」都不同公式。
   每個色票＝一張彩膠收在紙內袋：袋口拇指缺口、正中圓洞露出圓標；進場從袋口抽出一點（只動 translateY）。
   內袋的尺寸全用 cqi（.dc-pack 是 inline-size 容器）：洞、缺口、彩膠、圓標同一把尺，任何寬度比例都對得上。
   ============================================================ */
.dresscode { background: var(--paper); }
.sh-divider { position: relative; max-width: 46rem; margin: 0 0 3rem; padding-top: 2.5rem; }
.shd-tab {
  position: absolute; left: 1.2rem; top: 0; z-index: 1;
  margin: 0; height: 2.7rem;
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1rem .15rem;
  border-radius: .7rem .7rem 0 0;
  background: linear-gradient(180deg, #e8c159, var(--mustard));
  color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(34, 29, 24, .18);
}
.shd-tab b { font-size: 1.55rem; line-height: 1; }
.shd-tab span { font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .26em; }
.shd-card {
  position: relative;
  padding: 1.5rem 1.4rem 1.9rem;
  border-radius: .5rem;
  background:
    radial-gradient(120% 90% at 0 0, rgba(255, 255, 255, .08), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 7px),
    var(--green);
  color: var(--paper);
  box-shadow: 0 20px 30px -18px rgba(34, 29, 24, .65), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
/* 分隔卡下緣印一道四色條紋（唱片行自己印的卡） */
.shd-card::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: .8rem; height: 5px; background: var(--stripes-x); box-shadow: 0 0 0 1.5px rgba(243, 233, 210, .6); }
.shd-k { margin: 0 0 .35rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; color: #f2d37a; }   /* 芥黃在墨綠上 4.1：提亮一階 */
.shd-card .section-title { color: var(--paper); }
.dc-note { max-width: 38rem; margin: .6rem 0 0; white-space: pre-line; font-size: max(17px, 1.05rem); line-height: 1.95; color: var(--paper); }

.dc-swatches { --cols: 2; --gx: 1.1rem; list-style: none; margin: 0 auto; padding: 0; max-width: calc(var(--cols) * 14rem + (var(--cols) - 1) * var(--gx)); display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem var(--gx); }
.dc-swatches[data-n="1"] { --cols: 1; }
.dc-swatch { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); max-width: 14rem; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.dc-pack { position: relative; z-index: 0; display: block; width: 100%; aspect-ratio: 1 / 1.2; container-type: inline-size; }
/* 彩膠：在紙袋後面。靜止位置＝整張收在袋子裡、圓標正對圓洞；抽出後上緣露出袋口 16cqi，圓洞裡仍看得到圓標的下半 */
.dc-disc {
  position: absolute; z-index: 0;
  left: 3cqi; top: 23cqi; width: 94cqi; height: 94cqi;
  border-radius: 50%;
  background:
    conic-gradient(from 25deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 14% 44%, rgba(255, 255, 255, .16) 58%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle closest-side, transparent 0 52%, rgba(255, 255, 255, .1) 52.6% 53.6%, transparent 54.2% 72%, rgba(255, 255, 255, .1) 72.6% 73.6%, transparent 74.2% 96%, rgba(0, 0, 0, .22) 97%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .09) 0, rgba(0, 0, 0, 0) 1.2px, rgba(0, 0, 0, .09) 2.4px),
    radial-gradient(circle closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 75%),
    var(--c, #888);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), 0 3px 8px rgba(34, 29, 24, .3);
  transform: translateY(-19cqi);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 140ms + 100ms);
}
.dc-label {
  position: absolute; left: 50%; top: 50%;
  width: 32cqi; height: 32cqi; margin: -16cqi 0 0 -16cqi;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--paper-hi) 0 9%, rgba(0, 0, 0, .35) 10% 12%, transparent 13%),
    radial-gradient(circle closest-side, transparent 0 79%, rgba(201, 162, 74, .95) 80% 84%, transparent 85%),
    repeating-linear-gradient(0deg, transparent 0 18%, rgba(34, 29, 24, .12) 18% 20%),
    var(--orange);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.dc-label.is-alt { background-color: var(--mustard); }
.dc-label.is-alt { background:
    radial-gradient(circle closest-side, var(--paper-hi) 0 9%, rgba(0, 0, 0, .35) 10% 12%, transparent 13%),
    radial-gradient(circle closest-side, transparent 0 79%, rgba(34, 29, 24, .6) 80% 84%, transparent 85%),
    repeating-linear-gradient(0deg, transparent 0 18%, rgba(34, 29, 24, .12) 18% 20%),
    var(--mustard); }
html.wc .dc-swatch:not(.is-out) .dc-disc { transform: none; }
/* 圓洞邊緣的陰影（落在彩膠上）：夾在彩膠與紙袋之間的一層，紙袋蓋住的地方看不到，只在洞裡露出來 */
.dc-pack::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100cqi; z-index: 1; pointer-events: none;
  background: radial-gradient(circle 22cqi at 50% 50%, rgba(20, 16, 12, 0) 15cqi, rgba(20, 16, 12, .38) 22cqi);
}
/* 紙內袋：牛皮紙、拇指缺口、正中圓洞（mask 兩個洞取交集） */
.dc-sleeve {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100cqi; z-index: 2;
  background:
    radial-gradient(circle 23.5cqi at 50% 50%, rgba(34, 29, 24, .3) 22cqi, rgba(34, 29, 24, 0) 23.5cqi),
    radial-gradient(circle 10.5cqi at 50% 0, rgba(34, 29, 24, .22) 9cqi, rgba(34, 29, 24, 0) 10.5cqi),
    linear-gradient(180deg, rgba(34, 29, 24, .16), rgba(34, 29, 24, 0) 3cqi),
    linear-gradient(90deg, rgba(34, 29, 24, .07), rgba(34, 29, 24, 0) 4cqi 96cqi, rgba(34, 29, 24, .07)),
    repeating-linear-gradient(178deg, rgba(120, 90, 50, .04) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, #f1e4c4, #dcc697 70%, #d3bb88);
  -webkit-mask: radial-gradient(circle 22cqi at 50% 50%, transparent 21.6cqi, #000 22cqi), radial-gradient(circle 9cqi at 50% 0, transparent 8.6cqi, #000 9cqi);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 22cqi at 50% 50%, transparent 21.6cqi, #000 22cqi), radial-gradient(circle 9cqi at 50% 0, transparent 8.6cqi, #000 9cqi);
  mask-composite: intersect;
}
/* 袋子的影子：獨立一層墊在最底下（紙袋本身有 mask，box-shadow 會被切掉） */
.dc-pack::after { content: ""; position: absolute; left: 2cqi; right: 2cqi; bottom: -1cqi; height: 92cqi; z-index: -1; border-radius: 2px; box-shadow: 0 12px 18px -8px rgba(34, 29, 24, .55); }
.dc-name { margin-top: .8rem; font-weight: 700; font-size: max(19px, 1.2rem); letter-spacing: .12em; line-height: 1.45; }
/* 色碼小字（評審第 2 輪：保留給要對色的人，但字級與對比要過——13.6px 粗體窄體、墨色）；長輩先看上面的色名 */
.dc-hex { margin-top: .1rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13.6px, .85rem); letter-spacing: .1em; line-height: 1.5; color: var(--ink-soft); }
@media (min-width: 900px) {
  .sh-divider { margin-bottom: 3.6rem; }
  .shd-card { padding: 1.8rem 2rem 2.2rem; }
  .dc-swatches { --cols: 4; --gx: 2.2rem; row-gap: 3.2rem; }
  .dc-swatches[data-n="1"] { --cols: 1; }
  .dc-swatches[data-n="2"] { --cols: 2; }
  .dc-swatches[data-n="3"], .dc-swatches[data-n="5"], .dc-swatches[data-n="6"] { --cols: 3; }
  /* B5：分隔卡跟下面那排彩膠同寬、置中（原本 46rem 靠左，右半留白、左緣也跟彩膠對不齊）；卡內左標題、右說明 */
  .sh-divider { max-width: calc(4 * 14rem + 3 * 2.2rem); margin-inline: auto; }
  .shd-card { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: 3rem; align-items: end; padding-bottom: 2.8rem; }
  .shd-k, .shd-card .section-title { grid-column: 1; }
  .dc-note { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
}

/* ============================================================
   ⑤ 火柴盒（B4）
   抬頭＝墨綠琺瑯門牌（白框、兩顆螺絲）。外盒＝橘色紙盒＋奶油色貼標（店招）＋上下四色條紋；外盒側邊的磷面條＝導航鈕。
   內盒進場從外盒底下推出來（手機往下、桌機往右；只動 transform，外面那層 overflow:clip 的槽口負責「藏在盒子裡」）。
   ============================================================ */
.venue { background: var(--paper-lo); }
.sh-plate { margin-bottom: 1.8rem; display: grid; justify-items: start; gap: .8rem; }
.shp-plate {
  position: relative; margin: 0;
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .5rem 2rem;
  border-radius: .5rem;
  background: linear-gradient(180deg, #355443, var(--green));
  color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--green), inset 0 0 0 4.5px var(--paper), 0 3px 0 rgba(34, 29, 24, .3), 0 8px 14px -8px rgba(34, 29, 24, .5);
}
/* 兩顆螺絲 */
.shp-plate::before, .shp-plate::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6efe0, #a99d88); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .4); }
.shp-plate::before { left: .7rem; }
.shp-plate::after { right: .7rem; }
.shp-plate span { font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .32em; }
.shp-plate b { font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: #f2d37a; }
.venue-tag { margin: 0 0 .2rem; font-family: var(--font-narrow); font-weight: 700; letter-spacing: .14em; }

.mbox { position: relative; max-width: 58rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.mb-shell { position: relative; z-index: 2; display: grid; box-shadow: 0 24px 34px -22px rgba(34, 29, 24, .7); }
/* 外盒盒面：橘色紙盒，正中一張奶油色貼標 */
.mb-cover {
  position: relative;
  display: grid; justify-items: center; align-content: center; text-align: center;
  gap: .35rem;
  padding: 1.6rem 1rem 1.5rem;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, .16), transparent 70%),
    repeating-linear-gradient(2deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 5px),
    var(--orange);
  color: var(--ink);
}
.mb-stripes { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--stripes-x); }
.mb-stripes.is-b { top: auto; bottom: 0; }
/* 貼標：底色＝店招圖的紙色（去背圖貼上去不留邊），雙線框 */
.mb-cover::before {
  content: ""; position: absolute; inset: 1.2rem .75rem; z-index: 0;
  background: #e5d7b5;
  box-shadow: inset 0 0 0 3px #e5d7b5, inset 0 0 0 4px var(--ink), inset 0 0 0 6px #e5d7b5, inset 0 0 0 6.6px var(--ink), 0 1px 2px rgba(34, 29, 24, .3);
}
.mb-cover > :not(.mb-stripes) { position: relative; z-index: 1; }
.mb-sign { display: block; width: min(100%, 24rem); aspect-ratio: 2 / 1; height: auto; margin-top: .2rem; }
.mb-cover.has-sign .mb-shop { display: none; }
.mb-shop { margin: 0; font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: .14em; line-height: 1.2; }
.mb-sub { margin: 0 0 .6rem; padding: 0 1rem; font-family: var(--font-narrow); font-weight: 700; font-size: max(13px, .85rem); letter-spacing: .2em; line-height: 1.5; color: var(--ink); }
.mb-cover.has-sign .mb-sub { margin-top: -.4rem; }
.mb-cover.is-text { padding-block: 2rem; }
.mb-cover.is-text::before { inset: 1.1rem .75rem; }
.mb-no { margin: .4rem 0 0; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .3em; }
.venue2-name { margin: 0 1.2rem .5rem; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: .12em; line-height: 1.3; overflow-wrap: anywhere; }
/* 磷面條（外盒側邊）＝導航鈕：紅褐砂面、劃過的擦痕；純點擊，≥56px 高 */
.mb-strike {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 58px; padding: .6rem 1rem;
  text-decoration: none; color: var(--paper);
  background:
    linear-gradient(97deg, transparent 18%, rgba(255, 226, 196, .1) 18.5% 20%, transparent 20.5% 61%, rgba(255, 226, 196, .08) 61.5% 62.6%, transparent 63%),
    radial-gradient(circle at 1px 1px, rgba(255, 220, 190, .2) .8px, transparent 1.3px) 0 0 / 4px 4px,
    radial-gradient(circle at 2px 3px, rgba(20, 8, 4, .35) .8px, transparent 1.3px) 0 0 / 5px 5px,
    linear-gradient(180deg, #7a3c27, #5c2b1b);
  box-shadow: inset 0 0 0 2px #3f1d13, inset 0 3px 0 rgba(255, 220, 190, .1);
}
.mb-strike b { font-weight: 700; font-size: max(17px, 1.05rem); letter-spacing: .24em; }
.mbs-band { width: 2.2rem; height: 6px; background: var(--stripes-x); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.mbs-arrow { position: relative; width: 14px; height: 14px; }
.mbs-arrow::before { content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.mbs-arrow::after { content: ""; position: absolute; right: 1px; top: 6px; width: 15px; height: 2px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }
.mb-strike:active { background-color: #57291b; filter: brightness(.92); }
.mb-strike:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* 內盒槽口：clip 住還沒推出來的內盒（不用 clip-path——會讓 IntersectionObserver 量不到） */
.mb-slot { position: relative; z-index: 1; overflow: clip; margin-top: -1px; padding: 0 .8rem 22px; }
.mb-tray {
  position: relative;
  padding: .75rem .75rem .9rem;
  background:
    repeating-linear-gradient(90deg, rgba(120, 84, 40, .05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #dcc493, #cfb47c);
  box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .28), inset 0 7px 9px -5px rgba(34, 29, 24, .45), 0 16px 20px -14px rgba(34, 29, 24, .6);
  transition: transform 1.15s var(--ease-out) .2s;
}
html.wc .mbox:not(.is-open) .mb-tray { transform: translateY(-101%); }
/* 內盒裡躺著的火柴：一排橫躺的木棒＋橘紅火柴頭（兩排交錯） */
.mb-sticks {
  display: block; height: 28px; margin: 0 .2rem .7rem;
  background:
    radial-gradient(ellipse 8px 4.2px at 10px 3.5px, #8f3414 0 55%, #c4552a 75%, transparent 100%) 0 0 / 100% 14px repeat-y,
    radial-gradient(ellipse 8px 4.2px at calc(100% - 10px) 10.5px, #8f3414 0 55%, #c4552a 75%, transparent 100%) 0 0 / 100% 14px repeat-y,
    linear-gradient(180deg, transparent 0 1px, #f0d9a8 1px 5px, rgba(120, 84, 40, .6) 5px 6px, transparent 6px 8px, #e8ce98 8px 12px, rgba(120, 84, 40, .6) 12px 13px, transparent 13px 14px) 0 0 / 100% 14px repeat-y;
}
.map-frame { position: relative; background: var(--paper-hi); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .3), 0 2px 4px rgba(34, 29, 24, .25); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 內盒裡的手繪街道速寫（評審第 1 輪：不再用方格紙＋橘色定位針＋置中說明——那跟 #2 同款）：
   上面是鉛筆速寫（街廓、雙線街道、廟、往火車站的箭頭、一根火柴頭標出場地），底下一根火柴形狀的按鈕。整顆是同一個按鈕 */
.map-frame { min-height: 14.5rem; }
.map-load { position: relative; width: 100%; display: grid; color: var(--ink); text-align: left; background: #f7eedb; }
.ml-sketch { display: block; aspect-ratio: 8 / 5; background: repeating-linear-gradient(-28deg, transparent 0 9px, rgba(34, 29, 24, .035) 9px 10px), #f7eedb; }
.sk { display: block; width: 100%; height: 100%; }
.sk-blocks path { fill: rgba(224, 179, 59, .16); stroke: rgba(34, 29, 24, .28); stroke-width: 1.2; stroke-linejoin: round; }
.sk-roads path { fill: none; stroke-linecap: round; }
.sk-edge path { stroke: #2a231d; stroke-width: 25; }
.sk-fill path { stroke: #f7eedb; stroke-width: 21; }
.sk-temple path, .sk-temple rect { fill: none; stroke: #8e2c22; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-temple rect { fill: rgba(217, 98, 43, .14); }
.sk-stick { stroke: #c9a46a; stroke-width: 6; stroke-linecap: round; }
.sk-head { fill: #b8431c; stroke: #6e2410; stroke-width: 1.5; }
.sk-spot { fill: none; stroke: #b8431c; stroke-width: 2; stroke-dasharray: 3 4; }
.sk-arrow { fill: none; stroke: #2a231d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-t { font-family: var(--font-tc); font-weight: 700; font-size: 18px; letter-spacing: .06em; fill: var(--ink); paint-order: stroke; stroke: #f7eedb; stroke-width: 5px; stroke-linejoin: round; }
.sk-venue { font-size: 19px; fill: #8e2c22; }
/* 火柴按鈕：一根橫躺的木棒（整條按鈕的底），左端是火柴頭 */
.ml-match { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .55rem 1rem .4rem; }
.ml-match::before { content: ""; position: absolute; left: .9rem; right: .9rem; top: 50%; height: 1.9rem; translate: 0 -50%; border-radius: 3px; background: linear-gradient(180deg, #f1dcab, #e1c287 60%, #c9a46a); box-shadow: 0 2px 3px rgba(34, 29, 24, .3), inset 0 -1px 0 rgba(120, 84, 40, .4); }
.ml-match > * { position: relative; }
.mm-head { flex: none; width: 2.1rem; height: 2.4rem; border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%; background: radial-gradient(circle at 35% 30%, #e0714a, #b8431c 55%, #7a2a12); box-shadow: 0 2px 3px rgba(34, 29, 24, .35); }
.ml-match b { font-weight: 700; font-size: max(17px, 1.05rem); letter-spacing: .06em; line-height: 1.3; color: var(--ink); }
.ml-addr { display: block; padding: 0 1rem .75rem 3.8rem; font-size: max(15px, .95rem); line-height: 1.55; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.ml-addr:empty { display: none; }
.map-load:active .mm-head { filter: brightness(1.15); }
.map-load:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; }
/* 盒底：地址與交通，印在火柴盒背面（雙線框、SAFETY MATCHES 小字） */
.mb-back {
  position: relative; max-width: 58rem; margin: .4rem auto 0;
  padding: 1.2rem 1.4rem 1.3rem;
  background: repeating-linear-gradient(2deg, rgba(0, 0, 0, .02) 0 1px, transparent 1px 5px), var(--paper);
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--ink), inset 0 0 0 9px var(--paper), inset 0 0 0 9.6px var(--ink), 0 12px 20px -16px rgba(34, 29, 24, .55);
}
.mbb-print { display: flex; justify-content: space-between; gap: 1rem; margin: .2rem 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(34, 29, 24, .35); font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .24em; color: var(--ink-soft); }
.venue-hall { margin: 0; font-weight: 700; font-size: max(17px, 1.1rem); letter-spacing: .1em; }
.venue-address { margin: .2rem 0 0; font-size: max(17px, 1.05rem); }
.transport { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.transport li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .6rem; padding-top: .5rem; border-top: 1px dotted rgba(34, 29, 24, .4); font-size: max(15px, 1rem); }
.transport strong { font-weight: 700; letter-spacing: .1em; }
.venue-card2 { margin-top: 3.4rem; }
/* B5：桌機抬頭（門牌＋場地名）跟火柴盒同一條左緣（火柴盒 58rem 置中） */
@media (min-width: 900px) { .venue .sh-plate { max-width: 58rem; margin-inline: auto; } }
.venue-card2 > .venue-tag { margin-bottom: .6rem; }
@media (min-width: 900px) {
  .mbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .mb-slot { margin: 1.4rem 0 0 -1px; padding: 0 22px 22px 0; }
  .map-frame { aspect-ratio: 16 / 10; }
  html.wc .mbox:not(.is-open) .mb-tray { transform: translateX(-101%); }
  .mb-back { margin-top: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 2.4rem; }
  .mb-back .mbb-print { grid-column: 1 / -1; }
  .mb-back .venue-hall, .mb-back .venue-address { grid-column: 1; }
  .mb-back .transport { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
}

/* ============================================================
   ⑤b 歌詞本（B4）
   每頁行高固定整數 px（--L）；橫線用一條 1px 的 linear-gradient 疊 background-size: 100% var(--L)，
   相位 --lp 由 render.js layoutCustom 照頁眉的基線算（基線＋1px＝線的上緣），標題與內文用 padding-top 推到同一格線上。
   ============================================================ */
.custom { background: var(--paper); }
.sh-lyric { margin-bottom: 1.4rem; }
.sh-lyric p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.sh-lyric b { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: .06em; line-height: 1; }
.sh-lyric span { font-size: max(15px, 1rem); letter-spacing: .14em; color: var(--ink-soft); }
.lyric-book { display: grid; gap: 1.6rem; }
.custom-block {
  --L: 34px; --lp: 0px;
  position: relative;
  padding: 14px 1.2rem 34px 2.6rem;
  background:
    linear-gradient(90deg, transparent 0 1.75rem, rgba(217, 98, 43, .6) 1.75rem calc(1.75rem + 1.5px), transparent calc(1.75rem + 1.5px)),
    linear-gradient(180deg, rgba(47, 74, 59, .3) 0 1px, transparent 1px) 0 var(--lp) / 100% var(--L) repeat-y,
    radial-gradient(120% 60% at 80% 0, rgba(255, 255, 255, .5), transparent 70%),
    var(--paper-hi);
  box-shadow: 0 18px 28px -20px rgba(34, 29, 24, .6), 0 0 0 1px rgba(34, 29, 24, .12);
}
/* 頁眉 INSERT：墨色小字＋右邊頁碼；上緣一道四色條（隨片附贈的印刷單） */
.custom-block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--stripes-x); }
.cb-head { margin: 0; display: flex; justify-content: space-between; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .26em; color: var(--ink); line-height: var(--L); }
.cb-head .cb-no { color: var(--ink-soft); }
.custom-block-title { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 1.45rem; letter-spacing: .08em; line-height: var(--L); }
.custom-text { margin: 0; white-space: pre-line; font-size: max(17px, 1.05rem); line-height: var(--L); }
@media (min-width: 900px) {
  .lyric-book { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .custom-block { --L: 36px; padding-right: 1.6rem; }
  .custom-block:nth-child(odd) { transform: rotate(-.6deg); }
  .custom-block:nth-child(even) { transform: rotate(.5deg); }
  .custom-block:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1rem); }
}

/* ============================================================
   ⑥ 隱藏音軌（B4）：唱片 run-out（dead wax）。卡片底圖＝render.js 在 canvas 畫好的乾淨 run-out（has-surface 之後才有），
   之前先用 CSS 的近似底；刮開後的字＝手刻在溝槽尾端的 matrix 字（楷體、刻痕陰影、上面一行 matrix 編號）。
   ============================================================ */
.secret { background: var(--vinyl); color: var(--paper); }
.sh-runout { text-align: center; margin-bottom: 1.6rem; }
.shr-k { margin: 0 0 .3rem; font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .14em; color: #e3d3ae; }
.secret .section-title { color: var(--paper); }
.scratch-card {
  max-width: 34rem;
  border-radius: 1rem;
  background-color: #171412;
  background-image: radial-gradient(150% 110% at 50% 175%, var(--orange) 0 44%, #171412 44.4% 52%, transparent 52.4%), var(--grooves);
  box-shadow: 0 0 0 1px rgba(201, 162, 74, .5), 0 24px 40px -20px rgba(0, 0, 0, .8);
  color: var(--paper);
}
.scratch-text {
  font-family: "Kaiti TC", "BiauKai", "DFKai-SB", var(--tc-face), serif;
  font-weight: 400;
  font-size: max(18px, 1.15rem); line-height: 2; letter-spacing: .1em;
  color: #e9dfcc;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 240, 210, .2);
  min-height: 13rem;
  padding: 3rem 1.6rem 3.6rem;
  transform: rotate(-1deg);
  text-wrap: balance;
}
.scratch-text::before { content: attr(data-matrix); display: block; margin-bottom: .5rem; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; line-height: 1.6; letter-spacing: .26em; color: #c9bfab; transform: rotate(-1.5deg); }
.scratch-hint { left: 50%; right: auto; width: max-content; max-width: calc(100% - 2rem); translate: -50% 0; transform: translateY(-50%); padding: .45rem 1rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 15px; letter-spacing: .1em; text-indent: 0; white-space: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
/* 退路「直接看」：一顆看得到的外框膠囊鈕（不是淡淡的底線字），≥48px 高 */
.scratch-open { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; min-height: 48px; padding: .5rem 1.5rem; border-radius: 999px; border: 1.5px solid rgba(243, 233, 210, .75); color: var(--paper); opacity: 1; font-size: max(15px, .95rem); letter-spacing: .14em; text-indent: 0; text-decoration: none; }
.scratch-open:active { background: rgba(243, 233, 210, .12); }
.scratch-open:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

/* ============================================================
   ⑦ 點歌卡（B5）
   底＝冰果室的磨石子桌面（三層小色點，很淡）。卡＝奶油卡紙；紙本身畫在 ::after，左邊一排活頁孔與右上角剪票孔
   都是**真的孔**（mask），孔裡看得到底下的磨石子。影子另外放 ::before（mask 會把 box-shadow 一起切掉）。
   卡頭就是這一區的抬頭（店名小字＋「點歌卡 SONG REQUEST」＋卡號）——跟上一區 run-out 的置中刻字不同公式。
   桌機：左存根聯（點歌人、說明、截止、投幣口）｜虛線撕線｜右表單；整張卡撐滿版心。
   ============================================================ */
@property --vn-punch { syntax: "<length>"; inherits: false; initial-value: -1px; }
.rsvp {
  background:
    radial-gradient(circle at 30% 40%, rgba(47, 74, 59, .12) 0 1.3px, transparent 1.9px) 0 0 / 53px 47px,
    radial-gradient(circle at 70% 65%, rgba(217, 98, 43, .1) 0 1.1px, transparent 1.7px) 0 0 / 41px 59px,
    radial-gradient(circle at 45% 80%, rgba(34, 29, 24, .08) 0 .9px, transparent 1.5px) 0 0 / 29px 37px,
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .28) 0 1.6px, transparent 2.3px) 0 0 / 61px 43px,
    #e4d5b2;
}
.reqcard {
  --ph: 2.35rem;                 /* 剪票孔圓心離卡片右上角的距離 */
  position: relative; isolation: isolate;
  max-width: 64rem; margin-inline: auto;
  padding: 1.4rem 1.2rem 2.2rem 2.5rem;
}
/* 影子層（不帶底色：孔裡看不到它） */
.reqcard::before { content: ""; position: absolute; inset: 0; z-index: -2; box-shadow: 0 34px 50px -26px rgba(34, 29, 24, .6), 0 2px 0 rgba(34, 29, 24, .1); pointer-events: none; }
/* 紙層：卡紙＋孔緣陰影；mask＝(活頁孔那一欄 ∪ 其餘) ∩ 剪票孔 */
.reqcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 7px 11px, transparent 5.2px, rgba(34, 29, 24, .28) 5.6px, transparent 7.5px) .55rem .7rem / 14px 22px repeat-y,
    radial-gradient(90% 60% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
    var(--paper-hi);
  box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .14);
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--ph)) var(--ph), transparent var(--vn-punch), #000 calc(var(--vn-punch) + .6px)),
    radial-gradient(circle at 7px 11px, transparent 5.2px, #000 5.7px) .55rem .7rem / 14px 22px repeat-y,
    linear-gradient(90deg, #000 .55rem, transparent .55rem calc(.55rem + 14px), #000 calc(.55rem + 14px));
  -webkit-mask-composite: source-in, source-over;
  mask:
    radial-gradient(circle at calc(100% - var(--ph)) var(--ph), transparent var(--vn-punch), #000 calc(var(--vn-punch) + .6px)),
    radial-gradient(circle at 7px 11px, transparent 5.2px, #000 5.7px) .55rem .7rem / 14px 22px repeat-y,
    linear-gradient(90deg, #000 .55rem, transparent .55rem calc(.55rem + 14px), #000 calc(.55rem + 14px));
  mask-composite: intersect, add;
  transition: --vn-punch .26s cubic-bezier(.3, 1.5, .5, 1);
}
.reqcard.is-done::after { --vn-punch: 1.45rem; }
/* 剪票位：沒打之前是印好的虛線圈；打了之後＝孔緣的內陰影 */
.rq-punch { position: absolute; z-index: 1; top: calc(var(--ph) - 1.45rem); right: calc(var(--ph) - 1.45rem); width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1.5px dashed rgba(34, 29, 24, .32); pointer-events: none; }
/* 評審第 1 輪：孔太淡像淺凹 → 孔徑加大、孔裡是深色的桌面（冰果室深色木桌）＋厚的內陰影；打孔那一下孔從中心撐開（還原狀態直接是已打孔） */
.reqcard.is-done .rq-punch { border-color: transparent; background: radial-gradient(circle at 50% 62%, #3a2a1e, #22180f 70%); box-shadow: inset 0 5px 7px rgba(0, 0, 0, .75), inset 0 0 0 1.5px rgba(34, 29, 24, .6), 0 1px 0 rgba(255, 255, 255, .7); }
.reqcard.punch-fresh .rq-punch { animation: vn-punch-in .3s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes vn-punch-in { from { scale: .15; } }
/* 成功之後：上方的操作說明與截止章收起來（已經不用再選了） */
.reqcard.is-done .rsvp-intro, .reqcard.is-done .rsvp-deadline { display: none; }
/* 打下來的小圓紙片：從孔裡掉出去 */
.rq-punch::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--paper-hi); box-shadow: 0 1px 2px rgba(34, 29, 24, .35); opacity: 0; }
.reqcard.punch-fresh .rq-punch::after { animation: vn-chip .95s cubic-bezier(.45, 0, .8, .6) both; }
@keyframes vn-chip { 0% { opacity: 1; transform: none; } 15% { opacity: 1; transform: translate(.2rem, -.4rem) rotate(20deg); } 100% { opacity: 0; transform: translate(-2rem, 10rem) rotate(240deg) scale(.85, .5); } }

/* 卡頭 */
/* flex 換行：320 寬「SONG REQUEST」跟卡號放不下同一行時，卡號自己掉到下一行靠右（narrow 矩陣 B5 抓到相撞） */
.rq-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .2rem 1rem; padding-bottom: .7rem; border-bottom: 3px solid var(--ink); margin-bottom: 12px; }
.rq-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 4px; background: var(--stripes-x); }
.rq-parlor { flex: 1 0 100%; margin: 0 0 .6rem; padding-right: 3.4rem; display: flex; align-items: center; gap: .55rem; font-size: 15px; line-height: 1.4; color: var(--ink); }
.rq-parlor b { font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
.rq-parlor small { padding-left: .55rem; border-left: 1px solid rgba(34, 29, 24, .4); font-size: 15px; letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; }
/* 小點唱機：拱頂、四色燈管、墨框 */
.rq-jb { flex: none; width: 17px; height: 22px; border: 2px solid var(--ink); border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, transparent 0 55%, var(--ink) 55% 62%, transparent 62%), var(--stripes-x); }
/* 佔「卡號以外的剩餘寬度」：basis 0 才不會用一整行的 max-content 把卡號擠到下一行；min-width 保住「SONG REQUEST」不被壓扁，真的放不下（320 寬）卡號才換行 */
.rq-title { flex: 1 1 0%; min-width: min-content; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; }
.rq-title .section-title { font-size: clamp(2.3rem, 10vw, 3.3rem); letter-spacing: .12em; line-height: 1.05; }
.rq-en { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: max(15px, 1.05rem); letter-spacing: .16em; white-space: nowrap; }
.rq-no { margin: 0 0 0 auto; font-family: var(--font-narrow); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .1em; white-space: nowrap; }
.rq-no b { font-size: 1.3rem; }

/* 存根聯 */
.rq-stub { padding-top: 1.1rem; }
.rq-who { margin: 0 0 .6rem; display: flex; align-items: baseline; gap: .8rem; padding: .3rem 0; border-bottom: 1.5px solid rgba(34, 29, 24, .45); }
.rq-who small { font-size: max(15px, .95rem); letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; }
.rq-who b { font-size: 1.6rem; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.rsvp-intro { margin: .6rem 0 0; font-size: max(17px, 1.05rem); line-height: 1.95; white-space: pre-line; }
.rsvp-deadline { margin: .5rem 0 0; display: inline-block; padding: .1rem .6rem; border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .08em; color: var(--ink); rotate: -1.5deg; }
.rsvp-deadline:empty { display: none; }
/* 投幣口與本機曲目（只在桌機的存根聯出現）：手機版卡片已經夠長，不加 */
.rq-coin, .rq-menu { display: none; }

/* 表單 */
.rsvp-form { margin-top: 1.7rem; display: grid; gap: 1.6rem; }
.rsvp .field label, .rsvp .field legend { font-family: var(--font-tc); font-weight: 700; font-size: max(15px, .98rem); letter-spacing: .08em; color: var(--ink); }
.rsvp .field input[type="text"], .rsvp .field input[type="tel"], .rsvp .field input[type="number"], .rsvp .field textarea, .rsvp .field select {
  font-family: var(--font-tc);
  font-size: max(16px, 1.08rem);
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(34, 29, 24, .55);
  border-radius: 0;
  padding: .55rem .2rem;
}
.rsvp .field textarea { background: repeating-linear-gradient(180deg, transparent 0 2.15rem, rgba(34, 29, 24, .22) 2.15rem calc(2.15rem + 1px)); line-height: 2.15rem; padding-top: 0; border-bottom: 0; }
.rsvp .field input:focus-visible, .rsvp .field textarea:focus-visible, .rsvp .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.rsvp .field ::placeholder { color: #75695c; opacity: 1; }
.rsvp .field .error-text { margin: .35rem 0 0; color: var(--warn); font-weight: 700; font-size: 15px; }
.rsvp .field.has-error input { border-bottom: 2px solid var(--warn); }
.lab-sub { margin-left: .5em; font-weight: 400; font-size: 15px; color: var(--ink-soft); }
.attend-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.attend-options { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .8rem; }
.attend-pill { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.attend-pill input { position: absolute; opacity: 0; pointer-events: none; }
/* 點唱機選曲鍵 A／B（直立的大方鍵）：沒選＝凸起（下緣厚墨影）；選了＝按下去（3D 下沉＋芥黃亮起、字母圈的燈亮） */
.attend-pill > span {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; row-gap: .3rem; text-align: center;
  min-height: 8.4rem; padding: .9rem .5rem .8rem;
  border: 2px solid var(--ink); border-radius: .55rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 40%), var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
  -webkit-user-select: none; user-select: none;
}
.attend-pill em { width: 2.6rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 3px var(--orange); font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; line-height: 1; transition: box-shadow .2s; }
.attend-pill b { font-weight: 700; font-size: max(17px, 1.05rem); letter-spacing: .1em; line-height: 1.35; }
.attend-pill i { font-style: normal; font-family: var(--font-tc); font-weight: 400; font-size: 15px; letter-spacing: .06em; line-height: 1.4; word-break: keep-all; }
.attend-pill input:checked + span { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 40%), var(--mustard); }
.attend-pill input:checked + span em { box-shadow: inset 0 0 0 3px var(--orange), 0 0 0 3px rgba(217, 98, 43, .35); }
.attend-pill input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .attend-pill:hover input:not(:checked) + span { background-color: var(--paper-hi); } }
.ao-plain .attend-pill > span { min-height: 48px; padding: .6rem .5rem; }
.ao-plain .attend-pill b { font-size: 1rem; }
/* 沒選 A／B 就按 PLAY：兩顆鍵左右抖一下、框變墨紅 */
.reqcard.need-attend .attend-field:not(.ao-plain) .attend-pill > span { animation: vn-nudge .42s ease both; border-color: var(--warn); }
@keyframes vn-nudge { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } 100% { translate: 0 0; } }
.rsvp-details { display: grid; gap: 1.5rem; }
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(3, 1fr); } }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: .3rem; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-size: 1.3rem; line-height: 1; background: transparent; }
.stepper button:active { background: rgba(34, 29, 24, .1); }
.stepper button[disabled] { opacity: .4; }
.rsvp .stepper input { text-align: center; -moz-appearance: textfield; appearance: textfield; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-note { margin: .3rem 0 0; font-size: 15px; color: var(--ink-soft); }
.companion-list { display: grid; gap: .5rem; }
.companion-list input { font-family: var(--font-tc); font-size: max(16px, 1.05rem); border: 0; border-bottom: 1.5px solid rgba(34, 29, 24, .5); background: transparent; padding: .5rem .2rem; color: var(--ink); }
[data-rsvp-custom] { display: grid; gap: 1.5rem; }
.cq-checks { display: grid; gap: .5rem; }
.rsvp .cq-checks label { display: flex; align-items: center; gap: .5rem; font-size: 1rem; cursor: pointer; font-family: var(--font-tc); letter-spacing: 0; }
.rsvp .cq-checks input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--ink); }
/* 錯誤（沒選出席、送出失敗）：一張墨紅色的小紙條，左邊一個驚嘆號圓章 */
.rsvp-error { position: relative; margin: 0; padding: .7rem .9rem .7rem 2.7rem; border: 1.5px solid var(--warn); border-radius: 3px; background: rgba(142, 44, 34, .07); color: var(--warn); font-weight: 700; font-size: max(15px, .98rem); line-height: 1.6; }
.rsvp-error::before { content: "!"; position: absolute; left: .8rem; top: .78rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--warn); color: var(--paper-hi); font-family: var(--font-display); font-weight: 900; font-size: .85rem; line-height: 1.25rem; text-align: center; }
.rsvp-error[hidden] { display: none; }

/* PLAY 機械鈕：純點擊，:active 下沉；三角形畫在 ::after（按鈕本體只放純文字——送出中 shared/rsvp.js 會換字） */
.play-row { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: .4rem; }
.play-btn {
  position: relative;
  min-height: 64px; min-width: 11rem;
  padding: 0 3.2rem 0 1.6rem;
  border-radius: .6rem;
  background: linear-gradient(180deg, #e3743f, var(--orange));
  color: var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; letter-spacing: .2em;
  box-shadow: 0 7px 0 var(--orange-press), 0 10px 16px -4px rgba(34, 29, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.play-btn::after { content: ""; position: absolute; right: 1.3rem; top: 50%; margin-top: -.55rem; border-left: .95rem solid var(--ink); border-top: .55rem solid transparent; border-bottom: .55rem solid transparent; }
.play-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--orange-press), 0 3px 6px -2px rgba(34, 29, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
@media (hover: hover) and (pointer: fine) { .play-btn:not([disabled]):hover { background: linear-gradient(180deg, #e98150, #df6a33); } }
/* 送出中：鍵卡在按下去的位置、三角形換成一圈在轉的小唱片 */
.play-btn[disabled] { opacity: 1; cursor: progress; transform: translateY(6px); box-shadow: 0 1px 0 var(--orange-press), 0 3px 6px -2px rgba(34, 29, 24, .4); font-family: var(--font-tc); font-size: 1.15rem; letter-spacing: .16em; }
.play-btn[disabled]::after { width: 1.1rem; height: 1.1rem; border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: vn-spin .8s linear infinite; }
.play-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.play-hint { margin: 0; font-size: max(15px, .95rem); color: var(--ink); letter-spacing: .06em; }
.reqcard.need-attend .play-hint { color: var(--warn); font-weight: 700; }

/* 成功：B 面小圓標（從剪票孔的方向彈出來）＋回顯 */
.rsvp-success { padding-top: 1.6rem; display: grid; gap: 1.2rem; }
.bside { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 1rem; align-items: center; padding: .9rem 1rem; border: 1.5px dashed rgba(34, 29, 24, .4); border-radius: .5rem; background: rgba(224, 179, 59, .12); }
.bside svg { grid-row: 1 / 3; width: 5rem; height: 5rem; filter: drop-shadow(0 3px 4px rgba(34, 29, 24, .35)); }
.bside b { white-space: nowrap; font-family: var(--font-head); font-weight: 400; font-size: 1.45rem; letter-spacing: .12em; line-height: 1.3; }
.bside span { font-size: max(17px, 1.05rem); line-height: 1.6; overflow-wrap: anywhere; }
.bside small { display: block; font-family: var(--font-narrow); font-weight: 700; font-size: 14px; letter-spacing: .14em; }
.bside i { font-style: normal; font-family: var(--font-guest); font-weight: 700; word-break: keep-all; }
.rsvp-success.is-fresh .bside svg { animation: vn-pop .7s .3s cubic-bezier(.3, 1.4, .5, 1) both; }
.rsvp-success.is-fresh .bside { animation: vn-fadein-up .5s .2s ease both; }
@keyframes vn-pop { from { transform: translate(40%, -60%) scale(.3) rotate(-160deg); opacity: 0; } }
@keyframes vn-fadein-up { from { opacity: 0; translate: 0 .6rem; } }
.rc-text h3 { margin: 0 0 .4rem; font-family: var(--font-head); font-weight: 400; font-size: 1.55rem; letter-spacing: .1em; }
.rc-text p { margin: 0 0 .5rem; }
.success-summary { font-size: max(15px, .98rem); color: var(--ink); }
/* 留言回顯：抄在卡上的手寫字 */
.sent-msg { margin: .9rem 0; padding: .8rem 1rem .8rem; border-left: 3px solid var(--orange); background: rgba(224, 179, 59, .12); }
.sent-msg p { margin: 0; font-family: var(--font-hand); font-size: max(18px, 1.15rem); line-height: 1.9; overflow-wrap: anywhere; }
.sent-msg cite { display: block; margin-top: .3rem; font-style: normal; font-size: 15px; color: var(--ink-soft); overflow-wrap: anywhere; }
.success-note { font-size: 15px; color: var(--ink-soft); }
/* 修改回覆＝倒帶鍵 */
.rsvp-success .btn-ghost { gap: .6rem; min-height: 48px; }
.rsvp-success .btn-ghost::before { content: ""; width: 1.05rem; height: .75rem; background: currentColor; clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%); }
.rsvp-success .btn-ghost:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rsvp-closed { padding-top: 1.6rem; }
.rsvp-closed h3 { margin: 0 0 .4rem; font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; letter-spacing: .1em; }
.rsvp-closed p { margin: 0; }

@media (min-width: 900px) {
  .reqcard { --ph: 2.6rem; display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: 3.4rem; padding: 2rem 2.8rem 2.8rem 3.4rem; }
  .rq-head { grid-column: 1 / -1; }
  .rq-stub { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; position: relative; padding-top: 1.7rem; }
  .rq-stub > * { align-self: stretch; }
  .rq-stub > .rsvp-deadline { align-self: flex-start; }
  /* 撕線：存根聯與點歌卡本體之間的一排虛線（落在欄距正中） */
  .rq-stub::after { content: ""; position: absolute; top: 1.6rem; bottom: 0; right: -1.7rem; border-right: 2px dashed rgba(34, 29, 24, .3); }
  .rsvp-form, .rsvp-success, .rsvp-closed { grid-column: 2; grid-row: 2; }
  .rsvp-form { margin-top: 1.7rem; }
  .rq-menu { display: block; margin-top: 1.8rem; }
  .rqm-k { margin: 0 0 .5rem; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .22em; color: var(--ink-soft); }
  .rq-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
  .rq-menu li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; min-height: 2rem; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); font-size: 15px; line-height: 1.3; }
  .rq-menu li b { align-self: stretch; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 900; font-size: 15px; }
  .rq-menu li span { padding: .2rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; }
  .rq-menu li.is-b { margin-top: .3rem; border-style: dashed; }
  .rq-menu li.is-b b { background: var(--orange); color: var(--ink); }
  .reqcard.is-done .rq-menu li.is-b { border-style: solid; background: var(--mustard); }
  .rq-coin {
    display: grid; justify-items: center; gap: .2rem; align-self: center; margin-top: auto; translate: 0 .4rem;
    padding: .9rem 1.6rem .8rem; border-radius: .6rem;
    background: linear-gradient(180deg, #f2ede2, #c9c1b2 48%, #eae4d6 52%, #b6ad9c);
    box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .35), inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 8px -4px rgba(34, 29, 24, .5);
    color: var(--ink);
  }
  .rq-slot { width: .5rem; height: 2.4rem; border-radius: 3px; background: linear-gradient(90deg, #0d0b0a, #3a332c); box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #8f8676, 0 0 0 3px #f6f2e8; margin-bottom: .3rem; }
  .rq-coin b { font-weight: 700; font-size: max(15px, .95rem); letter-spacing: .2em; }
  .rq-coin small { font-family: var(--font-tc); font-size: 15px; letter-spacing: .12em; color: var(--ink); }
  .attend-pill > span { min-height: 8.8rem; }
}

/* ============================================================
   ⑧ 片尾（評審第 1 輪重排）：關店後的唱片行。先是終章——開場那台唱盤，唱針停在 run-out（抬臂、減速、停下才讀得到圓標）；
   再來是唱片裡夾的手寫謝卡（紙膠帶）＋唱片行名片（介紹朋友來店裡聽）。
   ============================================================ */
.footer {
  background: radial-gradient(120% 60% at 50% 0, #221d19, transparent 70%), var(--vinyl);
  color: var(--paper);
  padding: clamp(4rem, 12vw, 6rem) var(--gutter) 4.6rem;
  display: grid; justify-items: center; gap: 3.4rem;
  overflow-x: clip;
  position: relative;
}
/* 捲到底的哨兵：貼在頁尾最底下的 1px（不佔格線） */
.ft-end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }
.ft-row { width: min(100%, 60rem); display: grid; gap: 3rem; justify-items: center; }
/* Liner Notes（評審第 2 輪取代手寫謝卡＋紙膠帶＋信末署名——那是 #2 航空信的收尾公式）：
   印在唱片內袋上的說明——白色印刷內袋（上緣拇指缺口、內框印刷雙線）、鉛字排印的窄欄短文（明體、左右對齊、首行不縮）、
   底下一份唱片製作名單（窄體欄名＋點線引線＋人名），最下面一行版權小字。沒有手寫體、沒有紙膠帶、沒有「敬上」。 */
.liner {
  position: relative; width: min(100%, 30rem); padding: 2.4rem 1.9rem 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 40%), var(--paper-hi); color: var(--ink);
  box-shadow: inset 0 0 0 .7rem var(--paper-hi), inset 0 0 0 calc(.7rem + 1px) rgba(34, 29, 24, .7), inset 0 0 0 calc(.7rem + 4px) var(--paper-hi), inset 0 0 0 calc(.7rem + 5px) rgba(34, 29, 24, .7), 0 24px 40px -20px rgba(0, 0, 0, .85);
  /* 拇指缺口：內袋上緣正中一個半圓（看得到底下的深色頁尾） */
  -webkit-mask: radial-gradient(circle 2.1rem at 50% 0, transparent 2.05rem, #000 2.1rem);
  mask: radial-gradient(circle 2.1rem at 50% 0, transparent 2.05rem, #000 2.1rem);
}
.ln-head { margin: 0 0 1.1rem; display: grid; justify-items: center; gap: .15rem; text-align: center; }
.ln-en { font-family: var(--font-display); font-weight: 700; font-variation-settings: "opsz" 24; font-size: 1.05rem; letter-spacing: .32em; text-indent: .32em; }
.ln-head .tc { font-size: 15px; letter-spacing: .3em; text-indent: .3em; color: var(--ink-soft); }
.ln-head::after { content: ""; width: 2.4rem; height: 0; margin-top: .55rem; border-top: 1px solid var(--ink); }
.footer-message { margin: 0 auto; max-width: 19em; white-space: pre-line; font-family: var(--font-tc); font-size: max(17px, 1.06rem); line-height: 1.95; letter-spacing: .06em; color: var(--ink); text-align: start; }   /* 評審第 3 輪：不用 justify＋text-justify（Safari 不支援 text-justify，把「A 面」的半形空格撐成一大段）。不加 keep-all：WebKit 在 keep-all 底下不把全形逗號當斷點，整段變一個字、被 overflow-wrap 硬切成行首逗號 */
.ln-credits { margin: 1.4rem auto 0; max-width: 19em; display: grid; gap: .35rem; font-size: max(16px, 1rem); }
.ln-credits > div { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: baseline; gap: .5rem; }
.ln-credits > div[hidden] { display: none; }
.ln-credits > div::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1.5px dotted rgba(34, 29, 24, .5); translate: 0 -.3em; }
.ln-credits dt { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: .45em; letter-spacing: .12em; color: var(--ink-soft); white-space: nowrap; }
.ln-credits dt small { font-family: var(--font-narrow); font-weight: 700; font-size: 12.8px; letter-spacing: .14em; }
.ln-credits dd { grid-column: 3; grid-row: 1; margin: 0; font-weight: 700; letter-spacing: .1em; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }
.ln-credits dd.footer-names:empty { display: none; }
.ln-foot { margin: 1.3rem 0 0; text-align: center; font-family: var(--font-narrow); font-weight: 700; font-size: 12.8px; letter-spacing: .16em; color: var(--ink-soft); }
.ln-foot:empty { display: none; }
@media (max-width: 380px) {
  .liner { padding-inline: 1.5rem; }
  /* 窄螢幕：欄名與人名上下排（引線收掉），長名字不擠 */
  .ln-credits > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ln-credits > div::after { display: none; }
  .ln-credits dt, .ln-credits dd { grid-column: 1; grid-row: auto; text-align: left; }
}
/* 唱片行名片 */
.bizcard { position: relative; width: min(100%, 22rem); padding: 1.5rem 1.3rem 1.3rem; border-radius: 3px; background: radial-gradient(100% 70% at 30% 0, rgba(255, 255, 255, .4), transparent 60%), var(--paper); color: var(--ink); text-align: center; display: grid; gap: .2rem; justify-items: center; rotate: 1.8deg; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--ink), 0 18px 30px -16px rgba(0, 0, 0, .9); }
.bc-logo { width: 3.2rem; height: 3.2rem; margin-bottom: .3rem; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 7%, var(--orange) 7.5% 36%, var(--vinyl) 37%), var(--vinyl); box-shadow: inset 0 0 0 1px #000, 0 0 0 2px var(--gold); }
.bc-shop { margin: 0; font-family: var(--font-head); font-size: 1.75rem; letter-spacing: .2em; line-height: 1.3; }
.bc-en { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: max(13px, .82rem); letter-spacing: .22em; }
.bc-sub { margin: .1rem 0 0; font-family: var(--font-narrow); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--ink-soft); }
.bc-say { margin: .7rem 0 0; font-size: 16px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-soft); }
.bc-share { margin-top: .5rem; min-height: 48px; padding: .6rem 1.3rem; border-radius: 3px; background: var(--ink); color: var(--paper); font-family: var(--font-tc); font-size: 1rem; letter-spacing: .1em; box-shadow: 0 4px 0 #000; transition: transform .08s, box-shadow .08s; }
.bc-share:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.bc-share:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.share-done { margin: 0; font-size: 15px; min-height: 1em; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .ft-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); align-items: center; gap: 3.6rem; }
  .liner { justify-self: end; }
  .bizcard { justify-self: start; }
}

/* 終章（評審第 1 輪重做，首尾呼應開場）：同一台唱盤（.tt 整套沿用開場的 CSS），唱針停在 run-out 的鎖死溝——
   唱片還在轉、針每一圈輕輕跳一下。抬臂：唱頭抬起（.25s）→ 唱臂擺回臂架（.9s）→ 唱盤減速到停（render.js，2.2–3 秒，停在圓標轉正）。
   停下來圓標才讀得到；燈收小一點、字淡入、最後落「FIN 全曲終」。 */
.blessing { position: relative; isolation: isolate; width: min(100%, 40rem); display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding: .4rem 0 .4rem; }
.blessing::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(150vw, 62rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .2), rgba(255, 214, 150, .07) 50%, transparent 72%);
  transition: opacity 1.8s .4s ease, scale 2s .3s var(--ease-out);
}
.blessing.is-done::before { opacity: .6; scale: .72; }
.blessing-lead { margin: 0; max-width: 26em; font-size: max(17px, 1.1rem); line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.blessing .end-wrap { --tw: min(92vw, 27rem, 58svh); margin-top: .3rem; transform: none; }
.end-tt { cursor: pointer; }
.blessing.is-kept .end-tt { cursor: default; }
/* 唱片：最後一軌的溝槽到圓標之間是光滑的 run-out（50.5–60% 半徑），外圈一道亮一點的引出溝 */
.end-record { background: radial-gradient(circle closest-side, transparent 0 50%, #1b1816 50.5% 59.5%, rgba(255, 240, 210, .12) 60%, transparent 61%), var(--grooves), var(--vinyl); }
.blessing .end-wrap .tt-spin { animation: vn-spin 1.8s linear infinite; }
/* 圓標：南方唱片的橘標＋燙金細圈；字全掛在轉動層上——轉著的時候讀不到，停下來剛好轉正 */
.end-label {
  container-type: inline-size;
  position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%;
  /* 三列網格：中間那列＝唱盤軸（.tt-spindle 在正中央），上下兩塊字各自貼著它——字永遠不會壓到中心的軸（評審第 2 輪：兩三行的名字原本被軸蓋住一個字）。
     列高用 %（對圓標自己的高），不用 cqi——cqi 寫在容器自己的屬性上量的是祖先 */
  display: grid; grid-template-rows: minmax(0, 1fr) 9% minmax(0, 1fr); justify-items: center;
  /* 燙金細圈畫在背景（半徑的 93.4–95%）：評審第 2 輪——原本 box-shadow 用 cqi，但 cqi 寫在容器「自己」的屬性上量的是祖先容器，
     1440 寬時圈縮到半徑一半、正好壓過名字與編號。radial-gradient 的 % 是對圓標自己的半徑，任何寬度都在外緣 */
  background:
    radial-gradient(circle closest-side, transparent 93.4%, var(--gold) 93.8% 95.2%, transparent 95.6%),
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .16), transparent 55%), #e2703a;   /* 比圓標橘亮一階：墨字對比 5.3（紙紋顆粒疊上去後也 ≥4.5） */
  color: var(--ink); line-height: 1.2;
}
.el-top { align-self: end; display: flex; flex-direction: column; align-items: center; }
.el-bot { align-self: start; display: flex; flex-direction: column; align-items: center; }
.end-label[data-lines="3"] { grid-template-rows: minmax(0, 1fr) 6% minmax(0, 1fr); }
.el-k { font-family: var(--font-tc); font-weight: 700; font-size: max(13px, 10.5cqi); letter-spacing: .14em; }
.end-label.is-promo .el-k { font-family: var(--font-narrow); letter-spacing: .1em; }
.el-name { display: block; max-width: 86cqi; margin-top: 1cqi; font-family: var(--font-guest); font-weight: 700; font-size: max(13px, min(15.5cqi, calc(78cqi / (var(--n, 3) + 2.4)))); line-height: 1.15; white-space: nowrap; }
/* 長名字（5 個字寬以上）折兩行：「壓製」接在第二行尾；字級下限 13px */
/* 長名字折兩到三行（斷點由 __vnFit 寫死成換行字元）：「壓製」接在最後一行尾；--n／data-lines 寫在 .end-label 上 */
.el-name .gname { white-space: pre; }
/* 三行（長名字）：上下小字收一點、中間孔位收窄，整塊放進圓裡；字級下限 11px（評審第 2 輪：12 字不再截斷） */
/* 三行（長名字）：前兩行在軸上面、第三行＋「壓製」在軸下面（render.js 拆到 #el-name2），上下兩塊一樣高；字級下限 11px */
.end-label[data-lines="3"] .el-name { font-size: max(11px, min(15.5cqi, calc(76cqi / (var(--n, 3) + 2.4)))); line-height: 1.08; }
.el-name2[hidden] { display: none; }
/* 兩行：「本片為」＋兩行名字整塊在軸上面，320 寬（圓標約 100px）時最上面那行會頂出圓——上下小字與名字封頂收一點 */
.end-label[data-lines="2"] .el-name { font-size: max(11px, min(13cqi, calc(70cqi / (var(--n, 3) + 2.4)))); line-height: 1.08; }
.end-label[data-lines="2"] .el-k, .end-label[data-lines="2"] .el-ltd { font-size: max(11px, 9cqi); }
.end-label[data-lines="2"] .el-no { font-size: max(12px, 10.5cqi); }
.end-label[data-lines="3"] .el-k, .end-label[data-lines="3"] .el-ltd { font-size: max(11px, 8.6cqi); }
.end-label[data-lines="3"] .el-no { font-size: max(11px, 9.6cqi); }
.el-name .gname { font: inherit; }
.el-of { margin-left: .25em; font-family: var(--font-tc); font-weight: 700; font-size: max(11px, .82em); letter-spacing: .1em; }
.el-of:empty { display: none; }
.el-ltd { font-family: var(--font-tc); font-weight: 700; font-size: max(13px, 10.5cqi); letter-spacing: .02em; white-space: nowrap; }
.el-no { font-family: var(--font-narrow); font-weight: 700; font-size: max(14px, 12.5cqi); letter-spacing: .1em; white-space: nowrap; }
/* 唱臂：停在 run-out（37°＝針尖離中心約 56% 半徑）；唱頭是放下的樣子（跟開場收場同一個姿勢） */
.blessing .end-wrap .tt-arm { transform: rotate(37deg); transition: none; }
.blessing .end-wrap .arm-head { transform: scale(.935); }
.blessing .end-wrap .arm-shadow { transform: translate(calc(var(--tw) * .006), calc(var(--tw) * .008)); opacity: .62; }
/* 鎖死溝：每一圈針輕輕跳一下（跟唱片同一個週期 1.8s） */
.blessing .end-wrap:not(.is-lifted) .arm-body { animation: vn-lock 1.8s linear infinite; }
@keyframes vn-lock { 0%, 44%, 100% { rotate: 0deg; } 48% { rotate: -.7deg; } 53% { rotate: .3deg; } 58% { rotate: 0deg; } }
/* 抬臂：唱頭抬起、影子拉開（.25s）→ 唱臂擺回臂架（.9s，延遲 .25s）→ 停轉時放下。
   評審第 2 輪：改成 keyframes（不是 transition）——演出中唱盤被捲出畫面，render.js 掛 .is-paused，animation-play-state 讓唱臂停在半空，
   回到畫面再接續（transition 停不住）。唱盤本身在開始減速前還是 vn-spin，一起停。 */
.blessing .end-wrap.is-lifted .tt-arm { transform: rotate(0deg); animation: vn-arm-home .9s .25s cubic-bezier(.45, .05, .3, 1) backwards; }
@keyframes vn-arm-home { from { transform: rotate(37deg); } to { transform: rotate(0deg); } }
.blessing .end-wrap.is-lifted .arm-head { transform: scale(1.05); animation: vn-head-up .25s cubic-bezier(.3, .8, .4, 1) backwards; }
@keyframes vn-head-up { from { transform: scale(.935); } }
.blessing .end-wrap.is-lifted .arm-shadow { transform: translate(calc(var(--tw) * .034), calc(var(--tw) * .042)); opacity: .8; animation: vn-shadow-up .25s cubic-bezier(.3, .8, .4, 1) backwards; }
@keyframes vn-shadow-up { from { transform: translate(calc(var(--tw) * .006), calc(var(--tw) * .008)); opacity: .62; } }
.blessing .end-wrap.is-paused .tt-arm, .blessing .end-wrap.is-paused .arm-head, .blessing .end-wrap.is-paused .arm-shadow, .blessing .end-wrap.is-paused .tt-spin { animation-play-state: paused; }
.blessing .end-wrap.is-stopped .arm-head { transform: none; transition: transform .25s cubic-bezier(.3, .8, .4, 1); }
.blessing .end-wrap.is-stopped .arm-shadow { transform: translate(calc(var(--tw) * .022), calc(var(--tw) * .028)); opacity: 1; transition: transform .25s cubic-bezier(.3, .8, .4, 1), opacity .25s; }
.keep-btn { position: relative; z-index: 3; min-height: 52px;   /* 疊在唱盤影子上面（.tt-wrap 是 z2，影子壓到按鈕會讓字的對比掉到 3.3） */ padding: .7rem 1.6rem; border-radius: 999px; background: #e2703a; color: var(--ink); font-weight: 700; font-size: max(17px, 1.05rem); letter-spacing: .12em; box-shadow: 0 5px 0 var(--orange-press); }   /* 亮一階的橘：墨字 5.3（深色頁尾上紙紋顆粒會把 4.56 壓到 4.47） */
.keep-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-press); }
.keep-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.blessing-done { margin: 0; max-width: 24em; font-size: max(17px, 1.1rem); line-height: 1.8; min-height: 3.6em; opacity: 0; transition: opacity .7s .2s ease; word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
.bd-l { display: block; }
.bd-nb { white-space: nowrap; }   /* 「我們現場再放一次。」整句不拆（評審第 2 輪：320 寬剩「次。」掉一行） */
.blessing.is-done .blessing-done { opacity: 1; }
/* 按鈕與「唱盤停了」那句疊在同一格：抬臂之前不必替還沒出現的字空出一整段黑 */
.blessing-lead { grid-row: 1; } .end-wrap { grid-row: 2; }
.keep-btn, .blessing-done { grid-row: 3; grid-column: 1; align-self: start; }
.blessing-done { pointer-events: none; }
.bl-end, .bl-hint { grid-row: 4; grid-column: 1; align-self: start; }
.bl-hint { margin: 0 auto; max-width: min(22em, calc(100vw - 144px)); font-size: 15px; line-height: 1.7; letter-spacing: .08em; color: #d8c8a6; transition: opacity .4s ease; }
/* 評審第 3 輪：詞組不拆（320 寬原本斷成「唱臂會自／己抬起來」）；限寬 100vw−144px＝置中後右緣至少讓出 72px：字永遠不進音樂鈕的收邊判斷區（右緣 66px），鈕完整露出也碰不到字 */
.bl-hint span { display: inline-block; white-space: nowrap; }
.blessing.is-kept .bl-hint { opacity: 0; }
.bl-end { margin: .2rem 0 0; display: grid; justify-items: center; gap: .2rem; font-size: 15px; letter-spacing: .3em; color: #e3d3ae; opacity: 0; translate: 0 .5rem; transition: opacity .9s .9s ease, translate .9s .9s var(--ease-out); }
.bl-end span { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; letter-spacing: .3em; line-height: 1.1; color: var(--paper); text-indent: .3em; }
.blessing.is-done .bl-end { opacity: 1; translate: 0 0; }
@media (min-width: 900px) { .blessing .end-wrap { --tw: min(30rem, 58svh); } }
/* 一口氣滑到頁底的回扣（評審第 2 輪）：名片之後一行小字，點了捲回唱盤（不自動演出）；唱盤停下之後才收起來 */
.bl-back { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .4rem .9rem; font-size: 15px; letter-spacing: .1em; color: #e3d3ae; text-decoration: none; border-bottom: 1px solid rgba(227, 211, 174, .45); }
.bl-back i { font-style: normal; font-family: var(--font-narrow); font-weight: 700; color: var(--mustard); }
/* 評審第 3 輪：抬臂後、還沒停下就捲走的人也要有回扣（字由 render.js 換成「唱片還沒停」）；停下之後才收起來 */
.bl-back[hidden], .blessing.is-done ~ .bl-back { display: none; }
.bl-back:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.footer-contacts { display: grid; gap: .6rem; justify-items: center; }
.contact-row { display: flex; align-items: center; gap: .6rem; }
.contact-who { font-family: var(--font-tc); letter-spacing: .12em; font-size: 1.05rem; color: var(--paper); }
.contact-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243, 233, 210, .45); color: var(--paper); }
.contact-ico svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand { display: block; text-align: center; padding: .4rem var(--gutter) 0; font-family: var(--font-tc); font-size: 15px; letter-spacing: .14em; color: #e3d3ae; text-decoration: none; }

/* ============ 燈箱（引擎 shared/utils.js） ============ */
.wk-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(22, 20, 18, .95);
  padding: max(4vh, env(safe-area-inset-top, 0px)) max(4vw, env(safe-area-inset-right, 0px)) max(4vh, env(safe-area-inset-bottom, 0px)) max(4vw, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
}
.wk-lightbox.is-open { display: flex; }
/* 評審第 1 輪：燈箱套主題（只覆寫樣式，不改 shared）——照片放在點唱機的深色木框裡；左右是兩顆 52px 的選曲鈕；底下一條芥黃曲名條（選曲號＋曲名，render.js 補） */
.wk-lightbox { flex-direction: column; gap: .9rem; background: radial-gradient(90% 60% at 50% 45%, rgba(91, 58, 36, .35), transparent 70%), rgba(22, 20, 18, .985); }
.wk-lightbox img { max-width: 100%; max-height: 74dvh; margin-inline: auto; border: 12px solid transparent; border-radius: 4px; background: repeating-linear-gradient(91deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .07) 9px 11px, transparent 11px 23px) border-box, linear-gradient(135deg, var(--wood-hi), var(--wood) 55%, #3b2716) border-box; box-shadow: 0 0 0 2px #2b1c11, 0 0 0 4px rgba(201, 162, 74, .5), 0 24px 44px rgba(0, 0, 0, .6); }
.wk-lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 0; border-radius: 50%; color: var(--ink); font-size: 2.1rem; line-height: 1; opacity: 1; background: linear-gradient(180deg, #f2c955, var(--mustard) 60%, #c9962a); box-shadow: 0 4px 0 #7a5a17, 0 0 0 2px var(--ink), 0 8px 14px rgba(0, 0, 0, .45); }
.wk-lightbox button:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5a17, 0 0 0 2px var(--ink); }
.wk-lightbox button:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.wk-lb-close { top: max(.8rem, env(safe-area-inset-top, 0px)); right: max(.8rem, env(safe-area-inset-right, 0px)); font-size: 2.2rem; background: linear-gradient(180deg, #fffaf0, #d9d1c2 60%, #bdb3a2); box-shadow: 0 4px 0 #6b6359, 0 0 0 2px var(--ink); }
.wk-lb-prev { left: max(.5rem, env(safe-area-inset-left, 0px)); top: 50%; translate: 0 -50%; }
.wk-lb-next { right: max(.5rem, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; }
.vn-lb-cap { margin: 0; max-width: min(92vw, 34rem); padding: .45rem 1.1rem; border-radius: 3px; background: var(--mustard); color: var(--ink); font-size: max(17px, 1.05rem); font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-align: center; box-shadow: inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange); word-break: keep-all; overflow-wrap: anywhere; }
.vn-lb-cap:empty { display: none; }
@media (max-width: 899px) { .wk-lb-prev, .wk-lb-next { top: auto; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); translate: none; } .wk-lightbox { padding-bottom: 5.4rem; } }

/* ============ 共用按鈕皮 ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-family: var(--font-tc); font-size: 1rem; letter-spacing: .08em; padding: .8rem 1.2rem; min-height: 48px; background: var(--ink); color: var(--paper); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ============ 背景音樂鈕＝一枚 45 轉小唱片（覆寫 bgm.js 注入的圓鈕皮；位置與行為不動）：播放中才轉 ============ */
html body #wk-bgm-toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: radial-gradient(circle, var(--paper) 0 1.8px, var(--mustard) 2.2px 10.5px, transparent 11px), repeating-radial-gradient(circle, #1a1715 0 1px, #2e2823 1px 2px), var(--vinyl);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 4px 10px rgba(34, 29, 24, .4);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body #wk-bgm-toggle .wk-bgm-ico { width: 11px; height: 11px; }
/* 收邊（B4，render.js tuck；評審第 1 輪改）：鈕永遠在右下角。捲動停下時右下角 64×64 有字或可點的東西＝往右滑進畫面邊緣，露 23px 唱片邊
   （translate 屬性，跟轉動的 transform 分開）。**收著也是點一下就切換播放／靜音**（原本第一下只展開、第二下才靜音，長輩找不到）；
   收著的可點範圍＝露出的 23px＋往左延伸 21px＝44×56（評審第 2 輪：露 26px 時會壓到 A 面曲長「4:12」最後 3px → 露 23px）。頁尾底部留白 4.4rem＞鈕高＋間距，捲到底一定完整。 */
html body #wk-bgm-toggle {
  right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transition: opacity .45s ease, visibility .45s, transform .2s, translate .45s var(--ease-out), box-shadow .3s;
}
html.vn-bgm-tuck body #wk-bgm-toggle { translate: calc(33px + env(safe-area-inset-right, 0px)) 0; box-shadow: 0 0 0 2px var(--paper), -3px 3px 8px rgba(34, 29, 24, .45); }
/* 收著的時候觸控範圍往左多 21px：露出的 23px＋21px＝44px 寬（只蓋到頁面右側留白與鈕本身的位置，底下的字由收邊判斷避開） */
html.vn-bgm-tuck body #wk-bgm-toggle::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: -21px; right: 0; }   /* 方的：圓角會把 44 寬的左上左下角吃掉（評審第 2 輪逐點量） */
html body #wk-bgm-toggle:not(.is-off) { animation: vn-spin 1.33s linear infinite; }
/* 收著的時候不轉（評審第 2 輪：::after 延伸的點擊區掛在轉動的鈕上會跟著轉走，可點寬只量到 30px）：唱片紋路是同心圓，
   轉不轉只差中間那顆 11px 的小圖示，收邊時本來就只露一半；停轉後可點範圍固定＝露出 23px＋往左 21px＝44 寬 */
html.vn-bgm-tuck body #wk-bgm-toggle { animation: none; }
html body #wk-bgm-toggle.is-off .wk-bgm-ico { opacity: 1; }

/* ============ 字型庫 bridge（P2-26）：custom-* 是鎖定帖，不接字型庫角色；留空 ============ */

/* ============================================================
   首屏以下先不排版（沿用 #2）：開頁第一輪只排首屏與 A 面；其餘各區由 render.js 一區一個 task 渲染、排版、量實高，
   字型到齊後再趁閒置一區一區正式解開（content-visibility: visible）。
   **只在 Chromium 系開（旗標 script 掛 html.vn-cv）**：WebKit 的 content-visibility 會讓點擊命中測試落到別的區塊。
   佔位高度**刻意不寫 auto**（auto 會優先用開頁那一瞬間排過的空殼高度）；這裡的數字只是 JS 還沒輪到那一區之前的估計值。
   ============================================================ */
html.vn-cv #gallery, html.vn-cv #details, html.vn-cv #dresscode, html.vn-cv #venue, html.vn-cv #custom, html.vn-cv #secret, html.vn-cv #rsvp, html.vn-cv .footer { content-visibility: auto; contain-intrinsic-size: 1000px; }
html.vn-cv #gallery { contain-intrinsic-size: 1500px; }
html.vn-cv #details { contain-intrinsic-size: 1800px; }
html.vn-cv #dresscode { contain-intrinsic-size: 1100px; }
html.vn-cv #venue { contain-intrinsic-size: 1200px; }
html.vn-cv #custom { contain-intrinsic-size: 800px; }
html.vn-cv #secret { contain-intrinsic-size: 500px; }
html.vn-cv #rsvp { contain-intrinsic-size: 1500px; }
html.vn-cv .footer { contain-intrinsic-size: 1600px; }
@media (min-width: 900px) {
  html.vn-cv #gallery { contain-intrinsic-size: 1000px; }
  html.vn-cv #details { contain-intrinsic-size: 1100px; }
  html.vn-cv #dresscode { contain-intrinsic-size: 700px; }
  html.vn-cv #venue { contain-intrinsic-size: 900px; }
  html.vn-cv #custom { contain-intrinsic-size: 500px; }
}