/* 全站質感層：毛玻璃＋點擊回饋｜每一頁最後載入（LED 大螢幕頁不用）
   毛玻璃只用在「浮在內容上面」的列和彈窗：底下有東西捲過才看得出玻璃，鋪在純色上只會吃效能。
   文字列底色留 70% 深海夜，捲過的內文才不會和列上的字疊在一起；卡片、表單、輸入框不用毛玻璃。 */

:root {
  --fx-glass: rgba(6, 17, 31, .7);
  --fx-blur: blur(16px) saturate(140%);
  --fx-hair: 1px solid rgba(246, 239, 226, .12);
}

/* 頂部、底部的浮動列 */
.top, .topbar, .bottom, .filters, .tabs {
  background: var(--fx-glass) !important;
  -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur);
}
.top, .topbar, .filters, .tabs { border-bottom: var(--fx-hair) !important; }
.bottom { border-top: var(--fx-hair) !important; }

/* 彈窗：背景霧化，面板本身是較實的玻璃 */
.scrim { background: rgba(2, 6, 14, .5) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet { background: rgba(12, 29, 48, .88) !important; -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); box-shadow: inset 0 1px 0 rgba(246, 239, 226, .14); }
.toast { -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); }

/* 瀏覽器不支援毛玻璃時改成實色，字一樣清楚 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .topbar, .bottom, .filters, .tabs { background: rgba(6, 17, 31, .96) !important; }
}

/* 點擊回饋（視覺）：按下縮到 0.96、放開 120ms 回彈，外圈擴散一圈光。
   用 scale 屬性和 box-shadow，不動 transform、不加子元素，原本的版面不受影響。 */
.fx-tap { transition: scale .12s cubic-bezier(.3, 1.6, .5, 1); -webkit-tap-highlight-color: transparent; }
.fx-down { scale: .96; transition-duration: .05s; }
.fx-pulse { animation: fx-pulse .34s ease-out; }
@keyframes fx-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  to { box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-tap, .fx-down { scale: none; transition: none; }
  .fx-pulse { animation: none; }
}

/* 兩種動效之一：拖曳和橫向捲動要乾脆，捲到底不回彈、不帶動整頁 */
.chips, .tabs, .videos, .site-links { overscroll-behavior-x: contain; }
.videos > * { scroll-snap-stop: always; }

/* 右上角聲音設定：導覽列最右邊一顆圖示，點開是小玻璃面板（開關＋音量）。
   三種狀態：on 聲波亮金、wait 等第一次點擊（聲波慢慢呼吸）、off 打叉。 */
.wi-snd { position: relative; flex: none; margin-left: 4px; }
.wi-snd .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wi-snd-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid rgba(246, 239, 226, .16); background: rgba(246, 239, 226, .04); color: var(--s-mist, #a8b2c1); cursor: pointer; }
.wi-snd-btn svg { width: 16px; height: 16px; }
.wi-snd-btn .x { display: none; }
.wi-snd[data-state="on"] .wi-snd-btn { color: var(--s-gold, #e8c57e); border-color: rgba(232, 197, 126, .45); }
.wi-snd[data-state="off"] .w1, .wi-snd[data-state="off"] .w2 { display: none; }
.wi-snd[data-state="off"] .x { display: inline; }
.wi-snd[data-state="wait"] .w1, .wi-snd[data-state="wait"] .w2 { animation: wi-breath 1.8s ease-in-out infinite; }
.wi-snd[data-state="wait"] .w2 { animation-delay: .25s; }
@keyframes wi-breath { 50% { opacity: .25; } }
.wi-snd-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 232px; padding: 14px 16px; border-radius: 16px; display: grid; gap: 14px;
  background: rgba(12, 29, 48, .86); border: 1px solid rgba(246, 239, 226, .12); box-shadow: inset 0 1px 0 rgba(246, 239, 226, .1), 0 18px 40px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); font: 400 13px/1.5 var(--s-sans, sans-serif); color: var(--s-pearl, #f6efe2); transform-origin: top right; }
.wi-snd-pop[hidden] { display: none; }
.wi-snd-pop:not([hidden]) { animation: wi-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wi-pop { from { opacity: 0; scale: .92; } }
.wi-snd-row { display: flex; align-items: center; justify-content: space-between; }
.wi-snd-sw { width: 40px; height: 24px; border-radius: 999px; border: 0; padding: 2px; background: rgba(246, 239, 226, .16); cursor: pointer; transition: background .2s; }
.wi-snd-sw i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--s-pearl, #f6efe2); transition: translate .22s cubic-bezier(.34, 1.56, .64, 1); }
.wi-snd-sw[aria-checked="true"] { background: var(--s-gold, #e8c57e); }
.wi-snd-sw[aria-checked="true"] i { translate: 16px 0; background: #06111f; }
.wi-snd-vol { display: grid; gap: 8px; color: var(--s-mist, #a8b2c1); }
.wi-snd-vol input { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; margin: 8px 0;
  background: linear-gradient(90deg, var(--s-gold, #e8c57e) var(--v, 60%), rgba(246, 239, 226, .16) var(--v, 60%)); }
.wi-snd-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--s-pearl, #f6efe2); box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.wi-snd-vol input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--s-pearl, #f6efe2); }
.wi-snd-vol input:disabled { opacity: .35; }
.wi-snd-hint { margin: 0; font-size: 12px; color: var(--s-mist, #a8b2c1); }
/* 窄螢幕讓出圖示的位置：導覽連結間距縮一點，360 寬也放得下 */
@media (max-width: 400px) { .site-links { gap: 0; } .site-links a { padding: 6px 5px; } }
@media (prefers-reduced-motion: reduce) {
  .wi-snd[data-state="wait"] .w1, .wi-snd[data-state="wait"] .w2 { animation: none; }
  .wi-snd-pop:not([hidden]) { animation: none; }
}