/* ==========================================================
   設計系統：少、靜、留白
   ----------------------------------------------------------
   - 字級只有 5 種，粗細只有 2 種（一般、半粗）
   - 間距都是 4 的倍數，區塊之間留 72px
   - 一個畫面只有一顆白色主按鈕
   - 半透明面板只給「浮在內容上面」的東西：側欄、視窗、提示、手機底部導覽
   - 沒有反光、高光邊、陰影
   - 動態：畫面不會自己動；但只要是人去操作造成的變化，都有一小段過渡
     （按下會縮一下、移動的東西會滑過去、出現的東西會從來源長出來）
   ========================================================== */

:root {
  /* 顏色 */
  --bg: #0b0b0c;
  --ink: rgba(255, 255, 255, .92);      /* 主要文字 */
  --ink-2: rgba(255, 255, 255, .56);    /* 次要文字 */
  --ink-3: rgba(255, 255, 255, .45);    /* 最淡的文字（對比 4.5，小字也讀得清楚） */
  --ink-4: rgba(255, 255, 255, .2);     /* 目前不能點的項目 */
  --ink-on-image: rgba(255, 255, 255, .8); /* 壓在圖片上的次要文字 */
  --fill: rgba(255, 255, 255, .08);     /* 輸入框、選中項目的底色 */
  --fill-2: rgba(255, 255, 255, .13);
  --focus: #0a84ff;                     /* 鍵盤操作時的外框 */

  /* 字級：全站只有這 5 種 */
  --t-hero: clamp(30px, 3.1vw, 52px);   /* 主打標題（大螢幕上放大一點，最大 52px） */
  --t-title: 22px;                      /* 區塊標題 */
  --t-brand: 17px;                      /* 站名 */
  --t-body: 15px;                       /* 一般文字、按鈕、選單 */
  --t-small: 13px;                      /* 補充說明 */

  /* 圓角：小而俐落 */
  --r-box: 8px;
  --r-ctl: 6px;
  --r-sm: 4px;

  /* 版面 */
  --edge: 24px;                        /* 側欄離畫面邊緣的距離 */
  --side-w: 232px;                      /* 側欄寬度 */
  --pad: 48px;                          /* 內容左右的留白 */
  --content-left: calc(var(--edge) + var(--side-w) + var(--pad));

  /* 動態：三種長度，一條曲線 */
  /* 彈簧曲線（剛好不回彈的那一種）：從靜止起步、中段最快、平穩停下。
     一半的時間走完約 85%，所以反應快，但看得見「移過去」的過程 */
  --ease: linear(0, .044, .143, .263, .383, .494, .592, .675, .743, .799, .844, .88, .907, .929, .946, .959, .969, .977, .982, .987, 1);
  --dur-1: 120ms;                       /* 按下、變色 */
  --dur-2: 200ms;                       /* 小東西出現、消失 */
  --dur-3: 400ms;                       /* 位置或大小改變（形變） */
  /* 每個可以按的東西共用的過渡：按下的縮放、顏色、底色、透明度 */
  --t-ui: scale var(--dur-1) ease-out, color .15s ease, background-color .15s ease, opacity .15s ease;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Helvetica Neue", "Noto Sans TC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 40px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
input { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }

/* 訪客／會員 兩種狀態下各自顯示的內容；only-mobile 只在手機寬度出現 */
html:not(.is-member) [data-member] { display: none !important; }
html.is-member [data-guest] { display: none !important; }
.only-mobile { display: none !important; }

/* ---------- 半透明面板 ---------- */
.panel { background: rgba(24, 24, 26, .58); -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%); border-radius: var(--r-box); }

/* ---------- 按鈕 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-ctl); font-weight: 600; white-space: nowrap; transition: var(--t-ui); }
.btn .ic { width: 16px; height: 16px; }
.btn--primary { background: #fff; color: #000; }
.btn--primary:hover { opacity: .86; }
.btn--block { width: 100%; }
.text-btn { font-size: var(--t-small); color: var(--ink-2); transition: var(--t-ui); }
.text-btn:hover { color: var(--ink); }
/* 按下去立刻有反應：微微縮小，放開就回復（不回彈） */
.btn:active, .text-btn:active, .side-toggle:active, .sheet__x:active, .seg__item:active, .dock__item:active { scale: .97; }
.nav__item:active { scale: .985; }

/* ---------- 側欄 ---------- */
.side { position: fixed; left: var(--edge); top: var(--edge); bottom: var(--edge); width: var(--side-w); z-index: 40; padding: 16px 12px 12px; display: flex; flex-direction: column; transition: opacity var(--dur-2) ease, translate var(--dur-3) var(--ease), visibility 0s; }
/* 站名往右讓出收合按鈕的位置：按鈕對齊下面的圖示，站名對齊下面的文字 */
.brand { display: flex; align-items: center; height: 36px; padding: 0 12px 0 40px; margin-bottom: 12px; font-size: var(--t-brand); font-weight: 600; }
.nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
/* 選取的底色是「一塊會滑動的底」：選到別的項目時它滑過去，而不是這邊消失、那邊出現 */
.nav__ink { position: absolute; left: 0; right: 0; top: 0; height: 36px; border-radius: var(--r-sm); background: var(--fill); translate: 0 var(--y, 0px); opacity: var(--on, 0); pointer-events: none; transition: translate var(--dur-3) var(--ease), height var(--dur-3) var(--ease), opacity var(--dur-2) ease; }
.nav__item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: var(--t-ui); }
.nav__item:hover { color: var(--ink); }
.nav__item.is-on { color: var(--ink); }
.nav__label { font-size: var(--t-small); color: var(--ink-3); padding: 0 12px; margin: 24px 0 6px; }
.side__foot { margin-top: auto; position: relative; }
.avatar { display: grid; place-items: center; width: 22px; height: 22px; margin: 0 -2px; border-radius: 50%; background: var(--fill-2); font-size: var(--t-small); font-weight: 600; color: var(--ink); flex: none; }

/* ---------- 小選單（帳號、排序）：從按下去的地方長出來，關掉時縮回去 ---------- */
.menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; padding: 4px; border-radius: var(--r-ctl); background: #29292c;
  display: none; opacity: 0; scale: .96; transform-origin: 24px 100%;
  transition: opacity var(--dur-2) ease, scale var(--dur-2) var(--ease), display var(--dur-2) allow-discrete; }
.menu.is-open { display: block; opacity: 1; scale: 1; }
@starting-style { .menu.is-open { opacity: 0; scale: .96; } }
.menu .nav__item:hover { background: var(--fill); }

/* ---------- 側欄收合 ----------
   按鈕永遠在同一個位置。側欄收起來後整個消失，只留這顆按鈕，
   內容往左補滿，主打圖就完全不會被遮住。 */
.side-toggle { position: fixed; left: calc(var(--edge) + 13px); top: calc(var(--edge) + 14px); z-index: 41; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-ctl); color: var(--ink-2); transition: var(--t-ui); }
.side-toggle:hover { color: var(--ink); }
html.side-off { --content-left: var(--pad); }
html.side-off .side { opacity: 0; visibility: hidden; translate: -16px 0; pointer-events: none; transition: opacity var(--dur-2) ease, translate var(--dur-3) var(--ease), visibility 0s linear var(--dur-2); }
html.side-off .side-toggle { color: var(--ink); background: rgba(24, 24, 26, .58); -webkit-backdrop-filter: blur(40px) saturate(150%); backdrop-filter: blur(40px) saturate(150%); }
/* 收合由「形變過渡」負責時（見最下面），側欄本身不要再另外滑動：
   兩種動畫同時跑，側欄的字會疊成兩層重影。這時側欄只在原地淡出／淡入，內容則滑過來補位 */
html.vt-shift .side { transition: none; }

/* ---------- 手機底部導覽 ---------- */
.dock { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; padding: 4px; background: rgba(24, 24, 26, .92); view-transition-name: dock; }
.dock__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: var(--r-sm); font-size: var(--t-small); color: var(--ink-2); transition: var(--t-ui); }
.dock__item.is-on { color: var(--ink); }

/* ---------- 影片卡片：只有圖和兩行字，沒有外框 ---------- */
.card { display: block; view-transition-class: card; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: #161618; transition: scale var(--dur-1) ease-out; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease); }
/* 滑鼠移上去：圖片微微放大（表示可以點）；按下去：整張縮一點 */
@media (hover: hover) { .card:hover .thumb img { scale: 1.03; } }
.card:active .thumb { scale: .985; }
/* 不是經過「形變」出現的新卡片（例如打字搜尋時），用淡入的方式出現 */
.card.is-new { animation: fade var(--dur-2) ease both; }
.thumb__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.thumb__bar i { display: block; height: 100%; background: #fff; }
.card__title { margin-top: 12px; font-size: var(--t-body); font-weight: 400; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { margin-top: 2px; font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 註冊／登入視窗 ----------
   開啟時，視窗從「按下去的那個東西」擴張出來；關閉時縮回去（見最下面的形變過渡）。 */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); view-transition-name: dim; }
.sheet { position: relative; width: min(400px, 100%); padding: 32px; background: rgba(28, 28, 30, .94); view-transition-name: sheet; }
@keyframes fade { from { opacity: 0; } }
.sheet__x { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--ink-2); transition: var(--t-ui); }
.sheet__x:hover { color: var(--ink); }
.sheet__x .ic { width: 16px; height: 16px; }
.sheet h2 { font-size: var(--t-title); line-height: 1.3; padding-right: 32px; }
.sheet__lead { color: var(--ink-2); margin: 8px 0 24px; }
.seg { position: relative; display: flex; padding: 3px; border-radius: var(--r-ctl); background: var(--fill); }
.seg__blob { position: absolute; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: var(--r-sm); background: var(--fill-2); transition: translate var(--dur-3) var(--ease), width var(--dur-3) var(--ease); }
.seg__item { position: relative; flex: 1; height: 32px; text-align: center; border-radius: var(--r-sm); color: var(--ink-2); transition: var(--t-ui); }
.seg__item.is-on { color: var(--ink); }
.sheet form { display: grid; gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 6px; }
.field span { font-size: var(--t-small); color: var(--ink-2); }
.field input { height: 44px; padding: 0 12px; border-radius: var(--r-ctl); border: 0; outline: 0; background: var(--fill); transition: box-shadow var(--dur-1) ease-out, background-color .15s ease; }
.field input:focus { box-shadow: 0 0 0 2px var(--focus); }
.sheet form .btn { margin-top: 8px; }
.sheet__note { margin-top: 16px; font-size: var(--t-small); color: var(--ink-3); }

/* ---------- 提示訊息 ---------- */
.toast { position: fixed; left: 50%; bottom: 32px; translate: -50% 0; z-index: 120; padding: 12px 20px; border-radius: var(--r-ctl); background: rgba(40, 40, 43, .94); font-size: var(--t-small); white-space: nowrap; view-transition-name: toast; animation: toast-in var(--dur-3) var(--ease) both; }
.toast.is-out { animation: toast-out var(--dur-2) ease both; }
@keyframes toast-in { from { opacity: 0; translate: -50% 12px; } }
@keyframes toast-out { to { opacity: 0; translate: -50% 8px; } }

/* ----------------------------------------------------------
   形變過渡
   由程式把「一次畫面變化」交給瀏覽器（見 shell.js 的 morph）。瀏覽器會比對變化前後：
     - 前後都在、但位置或大小不同的東西 → 從舊的樣子「變形」成新的樣子
     - 只出現的 → 淡入並微微放大；只消失的 → 淡出並微微縮小
     - 其他沒有特別標記的部分 → 交叉淡化
   ---------------------------------------------------------- */
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); }
::view-transition-new(*):only-child { animation: var(--dur-3) var(--ease) both vt-in; }
::view-transition-old(*):only-child { animation: var(--dur-2) ease both vt-out; }
@keyframes vt-in { from { opacity: 0; scale: .96; } }
@keyframes vt-out { to { opacity: 0; scale: .96; } }
/* 影片卡片移動或縮放時：變化前後是同一張卡片，所以只拿「變化後」那一張去移動縮放，
   不做新舊兩張交疊淡化（交疊時兩張的字大小差一點點，會看到重影）。
   只出現或只消失的卡片不受影響，照樣淡入淡出 */
::view-transition-old(*.card) { display: none; }
::view-transition-new(*.card) { animation: none; }
::view-transition-new(*.card):only-child { animation: var(--dur-3) var(--ease) both vt-in; }
::view-transition-old(*.card):only-child { display: block; animation: var(--dur-2) ease both vt-out; }
/* 視窗後面的暗幕：只淡入淡出，不縮放 */
::view-transition-new(dim):only-child { animation: var(--dur-3) ease both fade; }
::view-transition-old(dim):only-child { animation: var(--dur-2) ease both reverse fade; }
/* 視窗從按鈕擴張出來：外框裁切，讓視窗內容像被「拉開」；按鈕本身很快淡掉 */
::view-transition-group(sheet) { overflow: hidden; border-radius: var(--r-box); }
::view-transition-old(sheet) { animation-duration: var(--dur-1); }
::view-transition-new(sheet) { animation-duration: var(--dur-2); }
/* 視窗縮回去（關閉，或登入後縮進帳號那一列）：視窗內容和目的地用同樣的時間一淡出、一淡入，
   兩者加起來始終是滿的，看起來是「視窗縮進去變成那個東西」；
   不這樣做的話，視窗內容會先不見，只剩一個空框在縮 */
html.vt-close::view-transition-old(sheet), html.vt-close::view-transition-new(sheet) { animation-duration: var(--dur-2); }
/* 變形途中的疊放順序：暗幕蓋住整頁，視窗在暗幕上面，提示訊息在最上面。
   不指定的話，瀏覽器會照「變形前」的前後順序疊，視窗展開途中就會被頁面上的搜尋列蓋住 */
::view-transition-group(dim) { z-index: 8; }
::view-transition-group(sheet) { z-index: 9; }
::view-transition-group(toast) { z-index: 10; }

/* ---------- 手機寬度 ---------- */
@media (max-width: 900px) {
  :root { --pad: 20px; --content-left: 20px; --t-body: 16px; }
  .side, .side-toggle { display: none; }
  .dock { display: flex; }
  .only-mobile { display: flex !important; }
  .toast { bottom: 96px; }
}

/* ---------- 使用者偏好：減少動態、減少透明、提高對比 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; animation-delay: 0s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel { background: #1c1c1e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: rgba(255, 255, 255, .8); --ink-3: rgba(255, 255, 255, .66); }
  .panel { background: #1c1c1e; outline: 1px solid rgba(255, 255, 255, .4); }
}