/* 方向 D v2：照 R1–R3 參考一比一，研究紀錄在 design/refs/D影片研究/。
   你要「一模一樣」，所以這一版的顏色、字體、陰影、漸層照參考，不照 DESIGN.md（例外寫在 DESIGN.md「D 的例外」） */
:root {
  --d-bg: #F3F3F3; --d-ink: #282720; --d-mute: #CFCFCF; --d-soft: #6E6B63;
  --d-gr: "Helvetica Neue", Helvetica, Arial, "Noto Sans TC", "PingFang TC", sans-serif;
  --d-it: "Bodoni Moda", "Noto Serif TC", serif;
}
html, body { background: var(--d-bg); }
body[data-dir="d"] { color: var(--d-ink); font-family: var(--d-gr); }
html.dv-lock { overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-f:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 載入字標：字分三段出現（淡灰），再一起變深，然後整頁淡入 ── */
.ld { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background-color: var(--d-bg); transition: background-color 240ms ease; }
/* 進場：底色很快退掉、整頁淡入，字標留在上面再慢慢淡出（照 R1：字標不會飛到左上角） */
.is-in .ld { background-color: rgba(243, 243, 243, 0); pointer-events: none; }
.ld-mark { transition: opacity 600ms ease 120ms; }
.is-in .ld-mark { opacity: 0; }
.ld-mark { margin: 0; font: 500 34px/1 var(--d-gr); letter-spacing: -0.02em; color: var(--d-ink); }
.ld-a { animation: ldA 2300ms ease both; }
.ld-b { animation: ldB 2300ms ease both; }
.ld-c { font-size: 0.42em; vertical-align: 1.1em; margin-left: 2px; animation: ldC 2300ms ease both; }
/* 每一段都是模糊的淡灰先出現，最後一起變深、變清楚 */
@keyframes ldA { 0% { opacity: 0; filter: blur(6px); } 18%, 61% { opacity: 0.22; filter: blur(2px); } 96%, 100% { opacity: 1; filter: blur(0); } }
@keyframes ldB { 0%, 18% { opacity: 0; filter: blur(6px); } 33%, 61% { opacity: 0.22; filter: blur(2px); } 96%, 100% { opacity: 1; filter: blur(0); } }
@keyframes ldC { 0%, 47% { opacity: 0; filter: blur(6px); } 58%, 61% { opacity: 0.22; filter: blur(2px); } 96%, 100% { opacity: 1; filter: blur(0); } }
main { opacity: 0; transition: opacity 260ms ease; }
.is-in main { opacity: 1; }

/* ── R1 首屏 ── */
.halo { position: relative; height: 100svh; min-height: 600px; overflow: hidden; overflow: clip; background: var(--d-bg); } /* clip：焦點捲不動它，頁首不會被帶走 */
.dh { position: absolute; top: 0; left: 0; right: 0; z-index: 150; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px 5% 0; }
.dh-mark { justify-self: start; font: 500 33px/1.33 var(--d-gr); letter-spacing: -0.02em; color: var(--d-ink); text-decoration: none; }
.dh-modes { display: flex; gap: 14px; }
.dh-modes button { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 400 13px/1 var(--d-gr); color: var(--d-ink); opacity: 0.4; cursor: pointer; transition: opacity 200ms ease; }
.dh-modes button[aria-pressed="true"] { opacity: 1; }
/* 照 R1「+ text me +」：16px、左右 19px、高 44px；框線是 SVG，灰框 #CFCFCF 上疊一段深色線（長度由 d.js 算） */
.dh-call { justify-self: end; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 19px; font: 400 16px/1 var(--d-gr); color: var(--d-ink); text-decoration: none; white-space: nowrap; }
.dh-call svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dh-call rect { fill: none; stroke-width: 1px; }
.dh-base { stroke: var(--d-mute); }
.dh-run { stroke: var(--d-ink); stroke-dasharray: var(--dl) var(--dl); stroke-dashoffset: var(--dl); transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.dh-call:focus-visible .dh-run { stroke-dashoffset: 0; }
@media (hover: hover) { .dh-call:hover .dh-run { stroke-dashoffset: 0; } } /* 手機點過後 :hover 會黏住，只給有滑鼠的裝置 */
.halo-stage { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } /* 菜卡自成一層：兩圈的疊放順序到 1000，不會蓋過頁首和最新消息 */
.halo-stage:active { cursor: grabbing; }
.hc { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: zoom-in; transform-origin: 50% 50%; will-change: transform; transition: opacity 400ms ease; }
.hc.off { opacity: 0; } /* 不在轉盤上的菜，轉盤模式時淡出 */
.hc img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; transition: transform 550ms cubic-bezier(0.22, 0.68, 0.25, 1), filter 550ms ease; }
.hc:focus-visible { z-index: 2000 !important; outline: calc(2px / var(--s, 1)) solid var(--d-ink); outline-offset: calc(4px / var(--s, 1)); } /* taste-skill-ignore 用鍵盤選到的菜浮到最上面，焦點框才不會被前排蓋住 */
/* 手機兩排附菜名（11-04 你的 P3）：字的大小抵銷卡片縮放，畫面上都是 13px */
.hc-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(6px / var(--s, 1)); font: 500 calc(13px / var(--s, 1))/1.2 var(--d-gr); letter-spacing: -0.02em; white-space: nowrap; color: var(--d-ink); pointer-events: none; opacity: 0; transition: opacity 200ms ease; }
.halo.two[data-mode="row"] .hc-name { opacity: 1; transition: opacity 300ms ease 350ms; } /* 菜飛到位（0.5 秒走九成）才浮現；切回轉盤馬上淡出 */
/* 照 R1：兩種模式滑到菜上都會往上浮 7px、放大 1.045 倍、亮 2.5%，底下出現影子（原作是方卡的 box-shadow，菜去背改用 drop-shadow） */ /* taste-skill-ignore 說明文字 */
@media (hover: hover) {
  .hc:hover { z-index: 2000 !important; } /* taste-skill-ignore 浮起的菜蓋在鄰居上面（蓋過每格寫入的 z-index） */
  .hc:hover img { transform: translateY(-7px) scale(1.045); filter: brightness(1.025) drop-shadow(0 16px 16px rgba(40, 39, 32, 0.2)); } /* taste-skill-ignore 照 R1 參考一比一 */
}

/* 最新消息：照 R1「Worked with. Featured on.」那條往左跑的帶子 */
.news { position: absolute; left: 0; right: 0; top: calc(100% - 130px); z-index: 140; } /* 原作的帶子跟著畫面底部走（首屏區塊在底部上方 180px 結束） */
.news-k { margin: 0 0 38px; text-align: center; font: 400 21px/1 var(--d-gr); letter-spacing: -0.03em; color: var(--d-mute); }
.news-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } /* taste-skill-ignore 照 R1 參考一比一 */
.news-run { display: flex; width: max-content; animation: news 140s linear infinite; }
.news-set { display: flex; gap: 112px; padding-right: 112px; }
.news-set span { white-space: nowrap; font: 500 18px/1.4 var(--d-gr); color: var(--d-ink); }
@keyframes news { to { transform: translateX(-50%); } }

/* 詳細頁：照 R1，整頁磨砂，左上計數、右上 Close ×、大圖、下面名稱和 ← → */
.dv { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; background: rgba(243, 243, 243, 0.98); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; transition: opacity 320ms ease; } /* taste-skill-ignore 照 R1 參考一比一 */
.dv.on { opacity: 1; }
.dv[hidden] { display: none; }
/* 照 R1：大圖 16:9，寬取「畫面寬 92%」和「畫面高 72% 的 16:9 寬」較小者 */
.dv-in { width: min(92vw, 128vh, (100svh - 140px) * 16 / 9); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* 矮螢幕也要放得下計數列、名稱和箭頭（約 126px） */
.dv-top { display: flex; justify-content: space-between; align-items: center; font: 400 12px/1 var(--d-gr); }
.dv-close { min-height: 44px; padding: 0; border: 0; background: none; font: 400 13px/1 var(--d-gr); color: var(--d-ink); cursor: pointer; }
/* 圖片絕對定位填進 16:9 框，原始尺寸才不會把框撐大 */
.dv-fig { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.dv-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 30px rgba(0, 0, 0, 0.14)); } /* taste-skill-ignore 照 R1 參考一比一 */
.dv-foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.dv-zh { margin: 0; font: 500 20px/1 var(--d-gr); letter-spacing: -0.04em; }
.dv-sub { margin: 6px 0 0; font: 400 13px/1.4 var(--d-gr); color: var(--d-ink); }
.dv-nav { display: flex; gap: 12px; }
.dv-nav button { width: 46px; height: 50px; padding: 0; border: 0; background: none; font: 400 22px/1 var(--d-gr); color: var(--d-ink); cursor: pointer; }

/* ── R2 動作輪盤：新擬物（neumorphic） ── */
.ww { background: #F2F2F2; padding: 120px 5% 140px; }
.ww-h { margin: 0 0 24px; font: 500 33px/1.2 var(--d-gr); letter-spacing: -0.02em; }
.ww-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ww-wheel { position: relative; width: min(100%, 600px); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
/* 照 R2（我和子代理在你的 Chrome 逐格確認）：光從正上方打下來，只有正下方一層柔和落影＋細灰邊，沒有左上白光；
   滑上去變平（#EFEFEF、落影消失），按住變暗（#E8E8E8、上緣內陰影）。落影大小照鈕徑比例：下移 4.2%、模糊 14.5% */
.ww-btn {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid #DCDCDC; border-radius: 50%; background: linear-gradient(#FAFAFA, #F3F3F3); color: #000; cursor: pointer; /* taste-skill-ignore 照 R2 參考一比一 */
  box-shadow: 0 0.87cqw 3.05cqw rgba(0, 0, 0, 0.09); /* taste-skill-ignore 照 R2 參考一比一 */
  transition: box-shadow 50ms ease;
}
@media (hover: hover) { .ww-btn:hover { background: #EFEFEF; box-shadow: none; } } /* taste-skill-ignore 照 R2：滑過時拿掉落影 */
.ww-btn:active { background: #E8E8E8; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 -1px 1px rgba(255, 255, 255, 0.7); transition-duration: 30ms; } /* taste-skill-ignore 照 R2 參考一比一 */
.ww-btn:active .ww-plus::before, .ww-btn:active .ww-plus::after { background: #2A2A2A; }
/* 照 R2：「+」是兩條粗圓頭線（長 31%、粗 6.6% 鈕徑），順時針轉 45°（0.15 秒、ease、不轉過頭）；喜久版轉完換成人數 */
.ww-plus { position: absolute; inset: 0; transition: transform 150ms ease, opacity 150ms ease; }
.ww-plus::before, .ww-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 31%; height: 6.6%; border-radius: 999px; background: #000; transform: translate(-50%, -50%); }
.ww-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.ww-btn.has-n .ww-plus { transform: rotate(45deg); opacity: 0; }
.ww-n, .ww-u { opacity: 0; transition: opacity 260ms ease 120ms; }
.ww-btn.has-n .ww-n, .ww-btn.has-n .ww-u { opacity: 1; }
.ww-n { font: 500 clamp(30px, 3.6vw, 48px)/1 var(--d-gr); letter-spacing: -0.03em; }
.ww-u { font: 500 13px/1 var(--d-gr); color: #555; }
.ww-btn.turn .ww-n { animation: wwTurn 160ms ease; }
@keyframes wwTurn { from { transform: rotate(-45deg); opacity: 0; } }
.ww-items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ww-it { position: absolute; left: 50%; top: 50%; width: 30%; }
/* 照片本身已經有盤子，不加白色圓，只留盤子落在桌面的接觸影子 */
.ww-it img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.14)); } /* taste-skill-ignore 照 R2 參考一比一 */
.ww-info { display: grid; gap: 14px; align-content: center; }
.ww-hint { margin: 0; font: 400 19px/1.6 var(--d-gr); color: var(--d-soft); max-width: 26em; }
.ww-set { margin: 0; display: grid; gap: 4px; font: 700 31px/1.2 var(--d-gr); letter-spacing: -0.01em; }
.ww-set span { font: 400 14px/1.3 var(--d-gr); color: var(--d-soft); letter-spacing: 0; }
.ww-price { margin: 0; font: 500 64px/1 var(--d-gr); letter-spacing: -0.03em; }
.ww-meta { margin: 0; font: 500 17px/1.4 var(--d-gr); }
.ww-list { margin: 4px 0 0; padding-left: 1.5em; display: grid; gap: 6px; font: 400 16px/1.45 var(--d-gr); }
.ww-or { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid #DCDCDC; border-radius: 999px; background: #F8F8F8; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); font: 500 12px/1.6 var(--d-gr); } /* taste-skill-ignore 照 R2 參考一比一 */
.ww-en { display: block; font: 400 13px/1.3 var(--d-gr); color: var(--d-soft); }
.ww-act { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ww-call, .ww-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid #DCDCDC; border-radius: 999px; background: linear-gradient(#FAFAFA, #F3F3F3); color: var(--d-ink); font: 500 16px/1 var(--d-gr); text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09); } /* taste-skill-ignore 照 R2 參考一比一 */
@media (hover: hover) { .ww-call:hover, .ww-link:hover { background: #EFEFEF; box-shadow: none; } } /* taste-skill-ignore 照 R2：滑過時拿掉落影 */
.ww-call:active, .ww-link:active { background: #E8E8E8; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08); } /* taste-skill-ignore 照 R2 參考一比一 */
.ww-next { margin: 4px 0 0; font: 400 14px/1.5 var(--d-gr); color: var(--d-soft); }

/* ── R3 印表機與刮刮票：暗場（數值照 refs/D影片研究/子代理_R3.md 逐格量測） ── */
.tks { background: #0C0D0F; }
.tks-view {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden; touch-action: pan-y;
  background: radial-gradient(ellipse 85% 95% at 50% 45%, #1A1B1D 0%, #141517 48%, #0C0D0F 100%); /* taste-skill-ignore 照 R3 參考一比一 */
  --pw: 560px; --ph: 360px; --tw: 430px; --slot: 280px; --drop: 300px; --ty-p: 40px; --s-p: 1.68; --ty-q: 100px; --s-q: 1.756; --ty-t: -320px;
}
.tks-view.printing, .tks-view.coin-on { cursor: none; }
.tks-view.revealed { cursor: auto; }
.tks-dust, .tks-flakes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tks-dust { z-index: 5; } /* 浮塵在最上層的一片，不跟鏡頭動 */
.tks-flakes { z-index: 10; }
/* 鏡頭：每個位置帶自己的過場：回到印表機 0.3 秒、推一下 0.1 秒、拉遠 0.8 秒 */
.tks-cam { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-origin: 0 0; transition: transform 300ms cubic-bezier(.65, 0, .35, 1); }
.tks-cam[data-at="printer"] { transform: translateY(var(--ty-p)) scale(var(--s-p)); }
.tks-cam[data-at="push"] { transform: translateY(var(--ty-q)) scale(var(--s-q)); transition: transform 100ms cubic-bezier(.1, .9, .3, 1); }
.tks-cam[data-at="ticket"] { transform: translateY(var(--ty-t)); transition-duration: 800ms; }
/* 印表機：石墨灰機身、外圈柔和淺灰光暈；上蓋一條橫向亮帶、左邊亮邊；右欄送紙鍵（▲＋3×3 觸感點）、STATUS 綠燈、POWER 藍燈；出紙口有淺色斜面邊和切紙刀細齒 */
.pr {
  position: absolute; left: calc(var(--pw) / -2); top: 0; width: var(--pw); height: var(--ph); z-index: 3; border-radius: calc(var(--pw) * 0.05);
  background: linear-gradient(180deg, #2E2F31 0%, #252628 45%, #1F2022 100%); /* taste-skill-ignore 照 R3 參考一比一 */
  box-shadow: 0 0 0 1px #0B0B0C, inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 24px 2px rgba(190, 190, 196, 0.14), 0 40px 80px rgba(0, 0, 0, 0.5); /* taste-skill-ignore 照 R3 參考一比一 */
}
.pr-lid { position: absolute; left: 3%; top: 4%; right: 19%; bottom: 24%; border-radius: calc(var(--pw) * 0.035); background: linear-gradient(180deg, #55575A 0%, #6B6D70 22%, #7D7F82 30%, #5A5C5F 40%, #3C3E41 70%, #303235 100%); box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.4); } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-side { position: absolute; right: 2%; top: 4%; bottom: 4%; width: 15%; display: grid; justify-items: center; align-content: start; gap: calc(var(--ph) * 0.05); padding-top: calc(var(--ph) * 0.31); border-left: 1px solid rgba(0, 0, 0, 0.55); } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-key { position: relative; width: 70%; aspect-ratio: 0.63; border-radius: 6px; background: linear-gradient(180deg, #C4C5C7 0%, #B9BABC 40%, #9FA0A2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 2px #18191B, 0 3px 6px rgba(0, 0, 0, 0.6); } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-key i { position: absolute; left: 50%; top: 20%; width: 0; height: 0; transform: translateX(-50%); border-left: calc(var(--ph) * 0.02) solid transparent; border-right: calc(var(--ph) * 0.02) solid transparent; border-bottom: calc(var(--ph) * 0.034) solid #4A4B4E; }
.pr-key::after { content: ""; position: absolute; left: 28%; right: 28%; top: 56%; aspect-ratio: 1; background: radial-gradient(circle, #7E7F82 24%, transparent 30%) 0 0 / 33.34% 33.34%; } /* taste-skill-ignore 照 R3：送紙鍵下半的 3×3 觸感點 */
.pr-led { display: grid; justify-items: center; gap: 5px; font: 600 calc(var(--ph) * 0.025)/1 var(--d-gr); letter-spacing: 0.06em; color: #BDBDBD; }
.pr-led::after { content: ""; width: calc(var(--ph) * 0.022); aspect-ratio: 1; border-radius: 50%; background: #36D13A; box-shadow: 0 0 8px #36D13A, 0 0 2px rgba(255, 255, 255, 0.8) inset; } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-led-p::after { background: #2AA9FF; box-shadow: 0 0 8px #2AA9FF, 0 0 2px rgba(255, 255, 255, 0.8) inset; } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-slot { position: absolute; left: 9.5%; right: 25.5%; top: 79%; height: 13%; border-radius: 6px; background: #050505; box-shadow: 0 0 0 2px #46484C, 0 0 0 3px #1A1B1D, inset 0 3px 6px rgba(0, 0, 0, 0.9); } /* taste-skill-ignore 照 R3 參考一比一 */
.pr-slot i { position: absolute; left: 2%; right: 2%; bottom: 8%; height: 14%; background: repeating-linear-gradient(90deg, #8A8C90 0 1px, transparent 1px 3px); } /* taste-skill-ignore 照 R3：切紙刀細鋸齒 */
/* 票：一出來就蓋在出紙口前面，以上緣為軸從 85° 翻正（角度表在 d.js）；透視很弱 */
.tk-out { position: absolute; left: calc(var(--tw) / -2); top: var(--slot); width: var(--tw); z-index: 4; perspective: 12000px; transition: transform 650ms cubic-bezier(.65, 0, .35, 1); }
.tk-out.done { transform: translateY(var(--drop)); }
.tk {
  position: relative; display: grid; font-size: calc(var(--tw) / 22); padding: 2.35em 2.15em 1.9em; color: #1B1A17; /* 左右留白 0.1 票寬（照 R3） */
  transform-origin: 50% 0; transform: rotateX(85deg);
  background-color: #DAD6C9;
  background-image: radial-gradient(rgba(70, 64, 48, 0.2) 0.7px, transparent 0.9px), radial-gradient(rgba(255, 255, 255, 0.45) 0.6px, transparent 0.8px); /* taste-skill-ignore 照 R3：45° 網點紙紋 */
  background-size: 3px 3px, 3px 3px; background-position: 0 0, 1.5px 1.5px;
  /* 上下兩邊各 22 個半圓齒孔：直徑 0.017 票寬、間距 0.045 票寬（1em = 票寬 / 22） */
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 0.187em, #000 0.21em) top left / 0.99em 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 0.187em, #000 0.21em) bottom left / 0.99em 51% repeat-x; /* taste-skill-ignore 照 R3 參考一比一 */
  mask: radial-gradient(circle at 50% 0, transparent 0.187em, #000 0.21em) top left / 0.99em 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 0.187em, #000 0.21em) bottom left / 0.99em 51% repeat-x; /* taste-skill-ignore 照 R3 參考一比一 */
}
.tk p { margin: 0; }
.tk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.tk-brand { font: 700 1.32em/1 var(--d-gr); letter-spacing: -0.01em; }
.tk-no { font: italic 400 1em/1 var(--d-it); letter-spacing: 0.08em; color: #8B877C; white-space: nowrap; }
.tk-kind { justify-self: start; margin-top: 1.25em !important; padding-bottom: 0.45em; border-bottom: 0.11em solid #1B1A17; color: #3B3934; font: 500 0.78em/1 "Noto Serif TC", serif; letter-spacing: 0.5em; }
.tk-line { margin-top: 0.8em !important; font: italic 500 1.2em/1.3 var(--d-gr); color: #2A2824; }
.tk-line b { font-weight: 900; text-decoration: underline; text-decoration-thickness: 0.09em; text-underline-offset: 0.22em; }
/* 刮開後的凹窗：淺灰緞面金屬，上緣和左緣有內陰影，像壓進紙裡 */
.tk-win { position: relative; margin-top: 1.1em; aspect-ratio: 2.3 / 1; border-radius: 0.44em; overflow: hidden; background: linear-gradient(135deg, #D0CFCB 0%, #C4C3BF 50%, #B8B7B3 100%); box-shadow: inset 2px 3px 5px rgba(0, 0, 0, 0.28), inset -1px -1px 0 rgba(255, 255, 255, 0.35); } /* taste-skill-ignore 照 R3 參考一比一 */
/* 盲壓浮雕：和底色同色，左上亮邊、右下暗邊，看起來是凸起的；字標下面一條印刷對位線（中段一個十字、右端一個點） */
.tk-emb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #C6C5C1; text-shadow: -0.03em -0.035em 0 rgba(255, 255, 255, 0.7), 0.035em 0.045em 0 rgba(0, 0, 0, 0.24); } /* taste-skill-ignore 照 R3：浮雕的立體感 */
.tk-emb-star { position: absolute; left: 14%; top: 8%; font-size: 2.4em; }
.tk-emb-zh { font: 900 3.6em/1 "Noto Serif TC", serif; letter-spacing: 0.04em; }
.tk-emb-foot { display: flex; align-items: center; gap: 0.7em; margin-top: 0.4em; }
.tk-emb-reg { position: relative; width: 5em; height: 1px; background: #B4B3AF; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } /* taste-skill-ignore 照 R3：對位線 */
.tk-emb-reg::before { content: "+"; position: absolute; left: 42%; top: 50%; transform: translate(-50%, -52%); font: 400 1em/1 var(--d-gr); color: #B4B3AF; text-shadow: none; } /* taste-skill-ignore 照 R3：十字和線一起做浮雕，這裡取消多餘的影子 */
.tk-emb-reg::after { content: ""; position: absolute; right: -0.35em; top: -0.12em; width: 0.25em; height: 0.25em; border-radius: 50%; background: #B4B3AF; }
.tk-emb-sub { font: italic 700 0.72em/1 var(--d-gr); letter-spacing: 0.3em; }
.tk-metal { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.tk-metal.gone { visibility: hidden; }
.tk-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; margin-top: 1.2em; }
.tk-bar { width: 64%; height: 2.2em; fill: #141414; }
.tk-tel { white-space: nowrap; font: italic 400 0.77em/1 var(--d-it); color: #8B877C; text-decoration: none; letter-spacing: 0.04em; }
/* 半枚銀幣游標：圓頂朝上、平邊在下，逆時針轉約 24°；弧邊一圈齒紋、裡面淺浮雕；位置用 translate（d.js），旋轉才會繞著自己 */
.coin {
  position: absolute; left: 0; top: 0; z-index: 11; width: calc(var(--tw) * 0.115); aspect-ratio: 2 / 1; margin: calc(var(--tw) * -0.02875) 0 0 calc(var(--tw) * -0.0575);
  border-radius: 999px 999px 0 0; pointer-events: none; opacity: 0; rotate: -24deg; transition: opacity 80ms linear;
  background: radial-gradient(circle at 50% 100%, #C9C9C9 0 30%, #B2B2B2 31% 33%, #D0D0D0 34% 76%, transparent 77%), repeating-conic-gradient(from -90deg at 50% 100%, #DADADA 0deg 3deg, #8A8A8A 3deg 6deg); /* taste-skill-ignore 照 R3：硬幣齒邊和浮雕 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); /* taste-skill-ignore 照 R3 參考一比一 */
}
.tks-view.coin-on .coin { opacity: 1; }
/* 「✦ 再印一張」：畫面底部置中（中心在 95% 高），平常幾乎透明的深灰＋細淺框，滑過變淺灰底深字；
   碎裂後 1.05 秒淡入 0.15 秒（不位移），下一張票吐出的同一格直接消失 */
.tks-act { position: absolute; left: 50%; bottom: calc(5% - 17px); z-index: 9; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.tks-new { height: 35px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.27); border-radius: 999px; background: rgba(21, 21, 23, 0.55); color: #C9C9C9; font: italic 500 14px/1 var(--d-gr); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 150ms linear, background-color 150ms ease, color 150ms ease, border-color 150ms ease; } /* taste-skill-ignore 照 R3 參考一比一 */
.tks-new.on { opacity: 1; pointer-events: auto; }
.tks-new.on:hover, .tks-new.busy { background: #D4D4D4; color: #222; border-color: #D4D4D4; }
.tks-new.busy { pointer-events: none; }
.tks-view.printing .tks-new { transition: none; }
.tks-skip { padding: 8px 14px; border: 1px solid #555; border-radius: 999px; background: #1A1A1C; color: #EEE; font: 400 14px/1 var(--d-gr); } /* taste-skill-ignore 照 R3 參考一比一 */

/* 頁尾：其他頁面的連結；比較鈕固定在右下 */
.xj-foot { background: var(--d-bg); }
.d-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 17px/1.4 var(--d-gr); }
.d-links a { color: var(--d-ink); }
.d-dirs { position: fixed; right: 16px; bottom: 16px; z-index: 260; background: var(--d-bg); }

@media (prefers-reduced-motion: reduce) {
  .ld { display: none; }
  main { opacity: 1; }
  .news-run { animation: none; width: auto; } /* 不跑的時候照畫面寬換行，消息才不會排到畫面外 */
  .news-track { -webkit-mask-image: none; mask-image: none; }
  .news-set { flex-wrap: wrap; gap: 8px 28px; padding: 0 5%; }
  .news-set[aria-hidden] { display: none; }
  .hc-name, .halo.two[data-mode="row"] .hc-name { transition: none; } /* 減少動態時菜直接到位，菜名也直接出現 */
}
@media (max-width: 767px) {
  /* 照原作手機版（390×844 實測）：頁首只有字標和打電話鈕；模式切換在光環下方（中心距底 190px）；
     最新消息標題中心距底 107px、跑馬燈中心距底 53px */
  .dh { grid-template-columns: 1fr auto; padding: 27px 16px 0; }
  .dh-mark { font-size: 23px; line-height: 32px; }
  .dh-modes { position: absolute; left: 0; right: 0; top: max(calc(100svh - 212px), 428px); justify-content: center; gap: 29px; pointer-events: none; } /* 可視高度不到 600 時跟著光環的 600px 排版走，不壓到菜 */
  .dh-modes button { pointer-events: auto; }
  .dh-call { height: 32px; padding: 0 8px; gap: 6px; font-size: 12px; }
  .news { top: auto; bottom: 43px; }
  .news-k { font-size: 17px; margin-bottom: 33px; }
  .news-set { gap: 56px; padding-right: 56px; }
  .news-set span { font-size: 15px; }
  .dv-in { width: min(92vw, (100svh - 140px) * 4 / 3); }
  .dv-fig { aspect-ratio: 4 / 3; }
  .ww { padding: 72px 16px 96px; }
  .ww-h { font-size: 28px; }
  .ww-grid { grid-template-columns: 1fr; gap: 28px; }
  .ww-wheel { width: min(100%, 420px); }
  .ww-btn { width: 24%; }
  .ww-it { width: 34%; }
  .ww-price { font-size: 48px; }
  .ww-set { font-size: 26px; }
  .tks-view { min-height: 600px; }
  .d-dirs { bottom: 12px; right: 12px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .news-set { flex: 1; justify-content: center; padding: 0 16px; }
  .news-set span:nth-child(n+2) { display: none; } /* 手機模式鈕下面只放得下一行（和會跑的時候一樣高），多放會疊到模式鈕 */
}