/* https://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0;
  font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; outline: none; }

/* ==================================================================
   1892 萬聖節「今晚有鬼陪你看漫畫」— 依 Figma「2026萬聖節」還原
   三組版型：PC（設計稿寬 1280）、平板（834）、手機（390）。
   所有尺寸都是「設計稿像素 × --u」，--u ＝ 目前視窗寬 ÷ 該版設計稿寬，
   所以版面隨視窗等比縮放；PC 超過 1280 後置中不再放大。
   ================================================================== */

/* ---------- 版頭（本頁自己的，不用共用樣板；設計稿：紫底、橘 logo、橘字三個連結、橘膠囊裡五顆分享 icon）----------
   PC／平板有導覽＋分享；手機（<768）是 logo 靠左＋右邊漢堡，點開全螢幕紫色抽屜（Figma 208:4170，2026-10-12 新增）。沒有購物車。 */
.evh { position: sticky; top: 0; z-index: 100; background: #371B4B; font-family: "Zen Maru Gothic", "Noto Sans TC", "微軟正黑體", sans-serif; }
.evh *, .evh *::before, .evh *::after, .evh-drawer *, .evh-drawer *::before, .evh-drawer *::after { box-sizing: border-box; }
.evh-bar { display: flex; align-items: center; justify-content: center; height: 61px; padding: 0 24px; }
.evh-logo { display: block; }
.evh-logo img { display: block; width: 160px; height: auto; }
.evh-nav { display: none; align-items: center; gap: 13px; }
.evh-menu { display: flex; align-items: center; gap: 26px; }
.evh-menu a { color: #FC7326; font-size: 17px; font-weight: 500; text-decoration: none; }
.evh-menu a:hover, .evh-menu a:focus-visible { color: #FFA05A; }
.evh-social { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; border-radius: 999px; background: #FC9616; color: #371B4B; }
.evh-social a { display: flex; width: 17px; height: 17px; }
.evh-social a:hover { opacity: .7; }
.evh-social svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.evh-burger { display: block; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.evh-burger img { display: block; width: 30px; height: 30px; }
.evh-burger:focus-visible, .evh-close:focus-visible { outline: 2px solid #FC9616; outline-offset: 2px; border-radius: 4px; }
/* 抽屜：紫底；✕ 在右上（Figma：選單欄 332 寬、距頂 52）；三個連結 18px 橘字、彼此間隔 48；最下面分享膠囊 */
.evh-drawer { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #371B4B; font-family: "Huninn", "Noto Sans TC", sans-serif; }
.evh-drawer[hidden] { display: none; }
.evh-dcol { display: flex; flex-direction: column; align-items: center; gap: 48px; width: min(332px, 100% - 40px); margin: 0 auto; padding: calc(52px + env(safe-area-inset-top, 0px)) 0 48px; }
.evh-dtop { display: flex; justify-content: flex-end; width: 100%; padding: 6px 0; }
.evh-close { display: block; width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; }
.evh-close img { display: block; width: 50px; height: 50px; }
.evh-dmenu { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.evh-dmenu a { display: flex; align-items: center; justify-content: center; height: 40px; padding: 6px 12px; color: #FD7326; font-size: 18px; text-decoration: none; }
.evh-drawer .evh-social { gap: 8px; padding: 4px 12px; border-radius: 39px; height: auto; background: #FD9616; }
.evh-drawer .evh-social a { width: 20px; height: 20px; padding: 1.667px; }
@media (max-width: 767px) {
  .evh-bar { justify-content: space-between; height: 62px; padding: 0 20px; }
}
@media (min-width: 768px) {
  .evh-bar { justify-content: flex-start; }
  .evh-logo { margin-right: auto; }
  .evh-nav { display: flex; }
  .evh-burger { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .evh-bar { height: 72px; }
  .evh-menu { gap: 20px; }
  .evh-menu a { font-size: 14px; }
}

/* ---------- 版面骨架 ---------- */
.ev {
  --W: 1280;
  --u: calc(min(100vw, 1280px) / 1280);
  --L: calc((100% - var(--W) * var(--u)) / 2);
  --orange: #FD7425;
  --ink: #371B4B;
  --violet: #8B5CF6;
  --cw: 180;
  --wt: 20;
  font-family: "Zen Maru Gothic", "Noto Sans TC", "PingFang TC", "微軟正黑體", sans-serif;
  color: var(--ink);
  background: #FD7425; /* 與固定背景同色系，萬一背景圖還沒載入或被擋，也不會是黑的 */
  overflow-x: clip;
  isolation: isolate; /* 讓 .bgfix 的 z-index:-1 留在 .ev 內、疊在 .ev 的底色之上（否則會掉到黑底後面） */
}
.ev, .ev *, .ev *::before, .ev *::after { box-sizing: border-box; }
.ev a { text-decoration: none; color: inherit; }
.ev img { display: block; max-width: none; }
.ev [id] { scroll-margin-top: calc(61px + 8px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 主視覺＋閱讀挑戰（背景是整頁共用的固定背景 .bgfix，不另疊圖；見下） ---------- */
.stage {
  position: relative; z-index: 2;
  height: calc(1219 * var(--u));
}
.kv { position: absolute; left: calc(var(--L) - 40 * var(--u)); top: calc(26 * var(--u)); width: calc(1280 * var(--u)); height: auto; }
.chl { position: absolute; inset: 0; }
.tc { position: absolute; left: calc(var(--L) + 281 * var(--u)); top: calc(583 * var(--u)); width: calc(703 * var(--u)); }
.tc img { width: 100%; height: auto; }
.tc img { display: block; }
.bubble { z-index: 6; pointer-events: none; position: absolute; left: calc(var(--L) + 18 * var(--u)); top: calc(795 * var(--u)); width: calc(282 * var(--u)); height: calc(114 * var(--u)); transform-origin: 0 0; transform: rotate(-24.555deg); }
.bubble img { width: 100%; height: 100%; transform-origin: 100% 100%; animation: ev-sway 3s cubic-bezier(.42, 0, .58, 1) infinite; }
.msns { position: absolute; inset: 0; z-index: 1; } /* 會動的 .bubble／.ghost 是 z-index:6，浮在任務卡與領取鈕上面（pointer-events:none，不擋點擊） */
.msn { position: absolute; }
.msn .card { width: 100%; height: auto; }
.m1 { left: calc(var(--L) + 159 * var(--u)); top: calc(836 * var(--u)); width: calc(311 * var(--u)); }
.m2 { left: calc(var(--L) + 479 * var(--u)); top: calc(835 * var(--u)); width: calc(320 * var(--u)); }
.m3 { left: calc(var(--L) + 806 * var(--u)); top: calc(830 * var(--u)); width: calc(315 * var(--u)); }
/* 任務三（Figma Group 4）：卡片順時針轉 4°（以左上角為軸），讀者頭像＋萬聖節頭框另外疊在卡片上 */
.m3 .card { position: absolute; left: calc(23 * var(--u)); top: 0; width: calc(293 * var(--u)); transform: rotate(4deg); transform-origin: 0 0; }
.m3 .av { position: absolute; left: calc(111 * var(--u)); top: calc(228 * var(--u)); width: calc(86 * var(--u)); aspect-ratio: 1; }
.m3 .av img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.m3 .av img:first-child { left: 8.3%; top: 8.3%; width: 83.4%; border-radius: 50%; }
.ghost { z-index: 6; pointer-events: none; position: absolute; left: calc(var(--L) + 709 * var(--u)); top: calc(1092 * var(--u)); width: calc(147 * var(--u)); height: auto; animation: ev-float 2s ease-in-out infinite; }

/* Figma 的循環動畫（Plugin API 讀出來的，6 秒時間軸）：
   - 氣泡：以右下角為支點左右搖。轉角 0 → -5 → +5 → 0（Figma 負＝順時針；0.75s／1.5s／0.75s，ease-in-out），6 秒軸跑兩輪＝每 3 秒一圈。
   - R 鬼（PC 才有）：TRANSLATION_Y 0 → -14 → 0，每秒一個來回，6 秒軸三輪＝每 2 秒一圈，ease-in-out。 */
@keyframes ev-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
@keyframes ev-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-14 * var(--u))); } }
@media (prefers-reduced-motion: reduce) { .bubble img, .ghost { animation: none; } }

/* 任務進度／領取（狀態由 JS 畫）。視覺照 Figma 元件：BTN（未達標／領取／H／Variant6）、任務一～三、TOAST、DIALOGS。
   Figma 沒畫、依同一套元件補的：領取中（轉圈）、領取失敗（紅字＋紅色 toast）、未登入（灰糖果＋登入提示）。 */
.mp { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; min-width: calc(119 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); text-align: center; white-space: nowrap; font-family: "Huninn", "Noto Sans TC", sans-serif; }
.m1 .mp { top: calc(356 * var(--u)); }
.m2 .mp { top: calc(357 * var(--u)); }
.m3 .mp { top: calc(361 * var(--u)); }
.mp .lb { font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); color: #5B3B7A; }
.mp .cap { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); color: #5B3B7A; }
.mp .gr { color: #766C7D; }
/* 糖果膠囊（BTN/Default）：半透明灰底、深紫細框；糖果 39×29 的圖轉 90° 擺成 29×39 */
.mp .cp { display: flex; align-items: center; justify-content: center; padding: calc(5 * var(--u)) calc(16 * var(--u)); border: 1px solid #2B0F45; border-radius: calc(25 * var(--u)); background: rgba(227,227,227,.5); }
.mp button.cp { cursor: pointer; font: inherit; }
.mp button.cp:hover { background: rgba(227,227,227,.8); }
.mp .cd { display: flex; align-items: center; justify-content: center; width: calc(29 * var(--u)); height: calc(39 * var(--u)); }
.mp .cd img { width: calc(39 * var(--u)); height: calc(29 * var(--u)); max-width: none; transform: rotate(90deg); }
.mp .cd.lit { animation: ev-candy .45s ease-out; }
/* 領取鈕（BTN 領取）：hover／鍵盤聚焦＝Figma 的 H 變體（放大）；按下時下沉；領取中鎖住 */
/* 已領取（今日已領取） */
.mp .pill { display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(25 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.mp .pill img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.mp .pill.g { min-width: calc(133 * var(--u)); border: 1px solid #8A8097; background: #D5D5D5; color: #766C7D; }
/* 活動未開始／已結束（Variant6、活動結束） */
.mp button.pill { font-family: inherit; cursor: pointer; }
.mp button.pill:hover, .mp button.pill:focus-visible { filter: brightness(1.05); outline: 2px solid #8A8097; outline-offset: 2px; }
.mp[data-st="loading"] .cp, .mp[data-st="error"] .cp, .mp[data-st="pending"] .cp { opacity: .45; }
.mp .pill.o { min-width: calc(117 * var(--u)); border: 1px solid #5C5C5C; color: #5C5C5C; background: rgba(255,255,255,.6); }
.mp .pill.o.w133 { min-width: calc(133 * var(--u)); }
@keyframes ev-candy { 0% { transform: scale(.5) rotate(-25deg); } 70% { transform: scale(1.2) rotate(8deg); } 100% { transform: none; } }
@keyframes ev-pop { 0% { transform: translate(-50%, 12px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

/* ---------- 書單：BG.jpg（1280×720）每 720 重複，共 5 張（3600），內容流過底端接到深色區 ---------- */
/* 整頁背景是「視窗固定」（視差）：背景釘在畫面上，內容（主視覺、挑戰、書單）從上面捲過去。
   rakak 2026-10-06 指定；Figma 稿是各段捲動、只有版頭固定，這是刻意偏離（見 README）。
   作法：.bgfix 是 position:fixed 的鋪滿視窗圖層，放在 .bgwrap 裡；.bgwrap 用 clip-path 把它裁成只在 .stage＋.cats 範圍可見
   （頁尾是不透明色塊）。clip-path 這招在 iOS Safari 也行，不用 background-attachment:fixed（iOS 不支援）。
   視窗橫的用橫版 BG.jpg、直的用方形 BG（兩張都是設計師的原圖），cover 置中。 */
.bgwrap { position: relative; display: flow-root; clip-path: inset(0); } /* flow-root：不讓 .terms 的下邊距溢出到 .bgwrap 外面（外面是 .ev 的底色） */
.bgfix { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--orange) url(../images/bg-pc.jpg) 50% 50% / cover no-repeat; }
@media (max-aspect-ratio: 1/1) { .bgfix { background-image: url(../images/bg-sp.jpg); } }
.cats { position: relative; z-index: 1; padding-top: calc(129 * var(--u)); }
.bgfix { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--orange) url(../images/bg-pc.jpg) 50% 50% / cover no-repeat; }
@media (max-aspect-ratio: 1/1) { .bgfix { background-image: url(../images/bg-sp.jpg); } }
.cat { position: relative; z-index: 1; min-height: calc(619 * var(--u)); }
.cat[data-cat="ghost"] { min-height: calc(639 * var(--u)); }
.ct { height: calc(180 * var(--u)); }
.ct img { height: 100%; width: auto; margin: 0 auto; }
.cat[data-cat="ghost"] .ct { height: calc(200 * var(--u)); }
/* BL 標題在 Figma 是 320×180 的框、新圖 2:1 置中 → 320×160，上下各留 10 */
.cat[data-cat="bl"] .ct { height: calc(160 * var(--u)); padding-block: calc(10 * var(--u)); box-sizing: content-box; }
.books { display: grid; grid-template-columns: repeat(4, calc(180 * var(--u))); column-gap: calc(59 * var(--u)); justify-content: center; margin-top: calc(-1.4 * var(--u)); }
/* carousel（其他恐怖）：同一套書卡排成一列橫捲；--cols／--colw／--gap 決定一頁幾部 */
.car { --cols: 4; --colw: 180; --gap: 59; position: relative; width: calc((var(--cols) * var(--colw) + (var(--cols) - 1) * var(--gap)) * var(--u)); margin: 0 auto; }
.car .books { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(var(--colw) * var(--u)); grid-template-rows: none; grid-auto-rows: auto; column-gap: calc(var(--gap) * var(--u)); justify-content: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.car .books::-webkit-scrollbar { display: none; }
.car .books:focus-visible { outline: 3px solid #FD9616; outline-offset: 6px; border-radius: 8px; }
.car .book { scroll-snap-align: start; }
.car-btn { position: absolute; top: calc(125 * var(--u) - 10px); z-index: 2; display: grid; place-items: center; width: calc(24 * var(--u) + 20px); height: calc(24 * var(--u) + 20px); padding: 0; border: 0; background: none; color: #D2E859; cursor: pointer; }
.car-btn svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.car-btn.prev { left: calc(-25 * var(--u) - 10px); } .car-btn.next { right: calc(-24 * var(--u) - 10px); }
.car-btn:disabled { color: #B7489E; cursor: default; }
.car-btn:focus-visible { outline: 3px solid #FFD43B; outline-offset: -4px; border-radius: 8px; }

/* 書卡：照 Figma「Campaign book」實例的結構量的——
   卡頂 T；封面區固定 255 高，下面接 24（糖果列）＋8＋書名 24＋4＋作者 16＋8＋一句話 20/行。
   外框圖寬 = 卡寬、位置在 T 上方 .048W；封面窗 left 7.77%／寬 85.56%／高 1.23W／top .186W（W = 卡寬 --cw）。 */
.book { position: relative; width: calc(var(--cw) * var(--u)); font-family: "Huninn", "Noto Sans TC", "PingFang TC", sans-serif; }
.cv { position: relative; display: block; width: 100%; height: calc(255 * var(--u)); }
.win { position: absolute; left: 7.77%; top: calc(var(--wt) * var(--u)); width: 85.56%; height: calc(var(--cw) * 1.23 * var(--u)); overflow: hidden; border-radius: calc(4 * var(--u)); background: #E9DDF8; }
.win img { width: 100%; height: 100%; object-fit: cover; }
.fr { position: absolute; left: 0; top: calc(var(--cw) * -.048 * var(--u)); width: 100%; height: auto; pointer-events: none; }
.r18 { display: none; position: absolute; left: 50%; top: calc((var(--wt) + var(--cw) * .615) * var(--u)); width: calc(var(--cw) * .5 * var(--u)); transform: translate(-50%, -50%); border: calc(3 * var(--u)) solid #fff; border-radius: calc(14 * var(--u)); overflow: hidden; background: rgba(255,255,255,.35); text-align: center; color: #fff; }
.r18 b { display: block; padding: calc(2 * var(--u)) 0; background: rgba(125,115,135,.62); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: calc(1.5 * var(--u)); line-height: 1.3; }
.r18 i { display: block; padding: calc(1 * var(--u)) 0; color: #6C6575; font-size: calc(28 * var(--u)); font-weight: 900; font-style: normal; line-height: 1.15; }
[data-adult="1"] .r18 { display: block; }
[data-adult="1"] .win img { filter: blur(calc(10 * var(--u))); transform: scale(1.12); }
html.r18-ok [data-adult="1"] .r18 { display: none; }
html.r18-ok [data-adult="1"] .win img { filter: none; transform: none; }
.rate { display: flex; align-items: center; justify-content: space-between; height: calc(24 * var(--u)); }
.rate .cd { display: flex; align-items: center; }
.rate .cd img { width: calc(18 * var(--u)); height: auto; }
.rate .lab { font-size: calc(12 * var(--u)); letter-spacing: calc(.6 * var(--u)); line-height: calc(16 * var(--u)); color: #8A38F5; }
.nm { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: calc(8 * var(--u)); font-family: "Zen Maru Gothic", "Huninn", sans-serif; font-size: calc(20 * var(--u)); font-weight: 900; line-height: calc(24 * var(--u)); color: #3D2341; }
.au { margin-top: calc(4 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: calc(.6 * var(--u)); line-height: calc(16 * var(--u)); color: #8A38F5; }
.q { margin-top: calc(8 * var(--u)); padding-left: calc(8 * var(--u)); position: relative; font-size: calc(16 * var(--u)); letter-spacing: calc(.8 * var(--u)); line-height: calc(20 * var(--u)); color: #3D2341; }
.q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(2 * var(--u)); border-radius: calc(4 * var(--u)); background: #FCCD47; }

/* ---------- 活動資訊（PC：大鍋子；平板／手機：紫色圓角框） ---------- */
.info { position: relative; z-index: 1; padding-top: 0; }
.ti { width: calc(478 * var(--u)); height: calc(193 * var(--u)); margin: 0 auto; overflow: hidden; }  /* Figma 76:589：1100×550 的圖以 FILL 裁進 478×193 */
.ti img { width: 100%; height: 100%; object-fit: cover; }
/* 活動資訊（2026-10-14 新版 Figma 76:563「Campaign terms」×3）：896 寬、間距 16、框底 #42156D、5px #8543BA 框、圓角 24、(4,4) 實心陰影、內距 24 */
.terms { width: calc(896 * var(--u)); margin: calc(16 * var(--u)) auto calc(60 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.tbox { padding: calc(24 * var(--u)); border: calc(5 * var(--u)) solid #8543BA; border-radius: calc(24 * var(--u)); background: #42156D; box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #371B4B; text-align: center; font-family: "Huninn", "Noto Sans TC", "PingFang TC", sans-serif; letter-spacing: .1em; }
.tbox h3 { font-size: calc(26 * var(--u)); font-weight: 400; line-height: calc(34 * var(--u)); color: #C8FF4D; }
.tbox p { margin-top: calc(8 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: #FF861D; }
.copy { background: #371B4B; padding: calc(22 * var(--u)) 0 calc(24 * var(--u)); text-align: center; font-family: "Huninn", "Noto Sans TC", "PingFang TC", sans-serif; font-size: calc(16 * var(--u)); letter-spacing: calc(.5 * var(--u)); line-height: calc(26 * var(--u)); color: #FF7D32; }

/* ---------- toast（Figma TOAST／TOAST1）與領取頭框彈窗（Figma DIALOGS） ---------- */
/* 位置：下方置中（rakak 2026-10-08；Figma 只有元件、沒定位置）。避開 iPhone 底部手勢區；z-index 高於彈窗，在彈窗開著時也看得到 */
.toast { position: fixed; z-index: 500; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; padding: 4px 20px; border-radius: 16px; background: #2E1650; color: #fff; font: 16px/20px "Huninn", "Noto Sans TC", sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: ev-pop .3s ease-out; }
.toast .ic { flex: none; width: 39px; height: 29px; transform: rotate(90deg); margin: 5px -5px; }
.toast span { padding: 10px 0; }
.toast.err { background: #9C1012; }
.toast[hidden], .dlg[hidden], .dlg [hidden] { display: none; }
.dlg { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,10,35,.68); }
.dlg-box { width: min(396px, 100%); box-sizing: border-box; padding: 41px 12px 41px; border: 5px solid #5B2A9C; border-radius: 25px; background: #fff; box-shadow: 0 8px 0 #2E1650; display: flex; flex-direction: column; align-items: center; gap: 27px; text-align: center; color: #4A4060; font-family: "Huninn", "Noto Sans TC", sans-serif; }
.dlg-tag { padding: 8px 16px; border-radius: 25px; background: #FF7A1A; color: #2B0F45; font-size: 16px; line-height: 20px; }
.dlg h3 { font-family: "Zen Maru Gothic", "Huninn", sans-serif; font-size: 24px; font-weight: 900; line-height: 30px; letter-spacing: .96px; color: #4A4060; }
.dlg-frame { display: block; width: 153px; height: 153px; max-width: none; }
.dlg p { font-size: 16px; line-height: 20px; color: #4A4060; }
.dlg-btns { display: flex; justify-content: center; gap: 13px; width: 100%; max-width: 347px; }
.dlg-btns > * { flex: 1; max-width: 167px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 20px; border-radius: 20px; font: 900 16px/20px "Zen Maru Gothic", "Huninn", sans-serif; text-decoration: none; cursor: pointer; transition: transform .12s ease; }
.dlg .b2 { border: 2px solid #5B2A9C; background: #fff; color: #5B2A9C; }
.dlg .b1 { border: 2px solid #361F56; background: #5B2A9C; color: #fff; }
.dlg-btns > *:hover:not(:disabled) { transform: scale(1.05); }
.dlg-btns > *:disabled { cursor: progress; opacity: .85; }
.dlg-btns > *:focus-visible { outline: 3px solid #FF7A1A; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mp .cd.lit, .toast { animation: none; } .dlg-btns > * { transition: none; } }

/* ==================================================================
   平板（768–1023，設計稿 834）
   ================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ev { --W: 834; --u: calc(100vw / 834); --cw: 160.5; --wt: 29.9; }
  .ev [id] { scroll-margin-top: 80px; }
  .stage { height: calc(1018 * var(--u)); }
  .kv { left: calc(var(--L) - 26 * var(--u)); top: calc(16 * var(--u)); width: calc(834 * var(--u)); }
  .tc { left: calc(var(--L) + 92 * var(--u)); top: calc(366 * var(--u)); width: calc(650 * var(--u)); }
  .ev .bubble, .ev .ghost { display: none; }
  /* 平板稿還是舊素材；位置照 Figma 的框，新圖置中放進框裡 */
  .m1 { left: calc(var(--L) + 43 * var(--u)); top: calc(604.2 * var(--u)); width: calc(236 * var(--u)); }
  .m2 { left: calc(var(--L) + 299 * var(--u)); top: calc(610.5 * var(--u)); width: calc(236 * var(--u)); }
  .m3 { left: calc(var(--L) + 555 * var(--u)); top: calc(599.2 * var(--u)); width: calc(236 * var(--u)); }
  .m3 .card { left: calc(23.6 * var(--u)); width: calc(207.7 * var(--u)); transform: rotate(5deg); }
  .m3 .av { left: calc(77.9 * var(--u)); top: calc(167.6 * var(--u)); width: calc(70.8 * var(--u)); }
  .m1 .mp { top: calc(274.2 * var(--u)); }
  .m2 .mp { top: calc(274.9 * var(--u)); }
  .m3 .mp { top: calc(286.3 * var(--u)); }
  .cats { padding-top: 0; }
  .cat { padding: calc(24 * var(--u)) 0 calc(40 * var(--u)); min-height: calc(692 * var(--u)); }
  .cat[data-cat="ghost"] { min-height: calc(692 * var(--u)); }
  .ct { width: calc(360 * var(--u)); height: calc(180 * var(--u)); margin: 0 auto; }
  .ct img, .cat[data-cat="ghost"] .ct img { width: 100%; height: 100%; object-fit: contain; }
  .cat[data-cat="ghost"] .ct { height: calc(180 * var(--u)); }
  .cat[data-cat="bl"] .ct { height: calc(202.5 * var(--u)); padding-block: 0; }
  .books { grid-template-columns: repeat(4, calc(160.5 * var(--u))); column-gap: calc(32 * var(--u)); margin-top: calc(28.5 * var(--u)); min-height: calc(419.5 * var(--u)); }
  .car { --colw: 160.5; --gap: 32; }
  .car-btn { top: calc(110 * var(--u) - 10px); }
  .info { padding: calc(40 * var(--u)) 0 calc(48 * var(--u)); }
  .ti { width: calc(578 * var(--u)); height: calc(193 * var(--u)); }
  .ti img { height: 100%; object-fit: contain; }
  .terms { width: calc(738 * var(--u)); margin: calc(16 * var(--u)) auto 0; }
  /* 一欄時照閱讀順序：規則 → 時間 → 限制 → 注意事項（注意事項在 PC 是放左欄，這裡用 order 排到最後） */
  .copy { padding: calc(28 * var(--u)) calc(48 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: calc(1 * var(--u)); line-height: calc(24 * var(--u)); }
}

/* ==================================================================
   手機（<768，設計稿 390；超過 560 寬就置中不再放大）
   ================================================================== */
@media (max-width: 767px) {
  .ev { --W: 390; --u: calc(min(100vw, 560px) / 390); --cw: 160; --wt: 29.8; }
  .ev [id] { scroll-margin-top: 70px; }
  .stage { height: calc(2018.5 * var(--u)); }
  .kv { left: var(--L); top: 0; width: calc(390 * var(--u)); height: calc(390 * var(--u)); }
  .tc { left: calc(var(--L) + 20 * var(--u)); top: calc(413 * var(--u)); width: calc(350 * var(--u)); }
  .bubble { left: calc(var(--L) + 53.8 * var(--u)); top: calc(529.9 * var(--u)); width: calc(282.3 * var(--u)); transform: none; }
  .ev .ghost { display: none; }
  .m1 { left: calc(var(--L) + 45 * var(--u)); top: calc(650.2 * var(--u)); width: calc(300 * var(--u)); }
  .m2 { left: calc(var(--L) + 45 * var(--u)); top: calc(1112.7 * var(--u)); width: calc(300 * var(--u)); }
  .m3 { left: calc(var(--L) + 45 * var(--u)); top: calc(1561.5 * var(--u)); width: calc(300 * var(--u)); }
  .m3 .card { left: calc(18.6 * var(--u)); top: calc(-15.2 * var(--u)); width: calc(289.4 * var(--u)); transform: rotate(5deg); }
  .m3 .av { left: calc(99 * var(--u)); top: calc(213 * var(--u)); width: calc(90 * var(--u)); }
  .m1 .mp { top: calc(336.3 * var(--u)); }
  .m2 .mp { top: calc(323.8 * var(--u)); }
  .m3 .mp { top: calc(324 * var(--u)); }
  .cats { padding-top: 0; }
  /* Figma 手機書單（自動排版）：每區上 24／下 40、標題與書格間 8；書格 159 寬、欄距 32、列距 16、每本 399 高；
     各區標題框高度不同（設計師手動裁過），圖以「填滿裁切」放進框 */
  .cat { padding: calc(24 * var(--u)) 0 calc(40 * var(--u)); min-height: 0; }
  .cat[data-cat="ghost"] { min-height: 0; }
  .ct { width: calc(290 * var(--u)); height: calc(145 * var(--u)); margin: 0 auto; overflow: hidden; }
  .ct img, .cat[data-cat="ghost"] .ct img { width: 100%; height: 100%; object-fit: cover; }
  .cat[data-cat="bl"] .ct { height: calc(141 * var(--u)); padding-block: 0; }
  .cat[data-cat="ghost"] .ct { height: calc(136 * var(--u)); }
  .cat[data-cat="yandere"] .ct { width: calc(286 * var(--u)); height: calc(141 * var(--u)); }
  .books { grid-template-columns: repeat(2, calc(159 * var(--u))); column-gap: calc(32 * var(--u)); row-gap: calc(16 * var(--u)); grid-auto-rows: minmax(calc(399 * var(--u)), auto); margin-top: calc(8 * var(--u)); }  /* 至少 Figma 的列高；書卡多一行「不計入任務」時自己長高 */
  .car { --cols: 2; --colw: 159; --gap: 32; }
  .car .books { grid-auto-rows: minmax(calc(399 * var(--u)), auto); }
  .car-btn { top: calc(105 * var(--u) - 10px); }
  .car-btn.prev { left: calc(-22 * var(--u) - 10px); } .car-btn.next { right: calc(-22 * var(--u) - 10px); }
  .info { padding: calc(40 * var(--u)) 0 calc(48 * var(--u)); }
  .ti { width: calc(322 * var(--u)); height: calc(128 * var(--u)); overflow: hidden; }
  .ti img { height: 100%; object-fit: cover; }
  /* 新稿：5px 紫框（置中描邊＝內外各 2.5，用陰影畫才不影響排版）、四邊內距 24 */
  /* 手機（Figma 173:46010）：350 寬、框與框間距 24、標題 24px */
  .terms { width: calc(350 * var(--u)); margin: calc(24 * var(--u)) auto 0; gap: calc(24 * var(--u)); }
  .tbox h3 { font-size: calc(24 * var(--u)); }
  /* 一欄時照閱讀順序：規則 → 時間 → 限制 → 注意事項（注意事項在 PC 是放左欄，這裡用 order 排到最後） */
  .copy { padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: .1em; line-height: calc(24 * var(--u)); }
}
/* 不在任務書單裡的書（只做曝光）：後端 books[] 沒有它時由 JS 加上 */
.book .off-note { margin-top: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); width: fit-content; border-radius: calc(10 * var(--u)); background: #F1ECF4; color: #6C607A; font-size: calc(12 * var(--u)); line-height: 1.5; }