/* ═══════════════════════════════════════════════════════════════════════════
   pages.css — 職業 / 外觀 / 探險實況 三頁的桌機設計層
   ─────────────────────────────────────────────────────────────────────────
   載入順序：style.css → layout.css → enhance.css → dexbook.css → 這一份 → mobile.css
   ⚠️ 規則一律包在 @media (min-width: 1024px)：手機由 mobile.css 負責（載在後面），
      這裡不可以留任何會外溢到窄螢幕的宣告。
   ⚠️ 頁面範圍用 :has() 認頁，不靠 body class（app.js 不在可改範圍內）：
        職業列表 → #app:has(> .jtree)
        外觀     → #app:has(> #lookbody)
        探險實況 → #app:has(> .livebox)
   沿用 enhance.css 的語彙：--e1/--e2/--e3 三階陰影、--rim 紙張邊光、
   「精靈圖站在舞台上」（漸層底 + 腳下投影）、hover 浮起。
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

/* ═══════════════════════════════════════════════════════════════════════════
   🎖️ 職業頁 —— 使用者來這頁是要「選職業」，不是查技能表
   ─────────────────────────────────────────────────────────────────────────
   原本五欄卡片每一張權重都一樣：家族性格躲在 12px 灰字裡、一轉與二轉長得一模一樣、
   本季沒開的三四轉還跟它們排在同一條線上 —— 版型完全沒幫使用者做決定。
   主張：五個家族＝五張並排的「招募海報」。
     ① 家族頭像放大站上舞台，家族色變成真的色帶（不是 4px 邊）
     ② Lv10 起手的一轉放大成整欄的主角（你要先選的是這個）
     ③ Lv30 的分支用一條有標籤的岔路切開（「Lv30 選一條路」）
     ④ 三轉 / 四轉本季未開 → 一律沉到每欄最底，五欄切齊
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 起點：原本孤零零一張 260px 卡片，改成一條有敘事的起跑線 ── */
#app:has(> .jtree) .jtree-start {
  margin: 20px 0 16px;
  padding: 12px 20px 12px 14px;
  gap: 16px;
  border-radius: 18px;
  border: 1.5px solid var(--line-strong);
  background: linear-gradient(100deg, #fffdf8 0%, #fdf4e6 62%, #fbeedd 100%);
  box-shadow: var(--e1), var(--rim);
}
#app:has(> .jtree) .jtree-start::before {
  content: "起點";
  order: -1; flex: 0 0 auto;
  padding: 7px 13px; border-radius: 999px;
  font: 900 12px/1 Nunito, "Noto Sans TC", sans-serif; letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(180deg, #ff8a3d 0%, var(--accent) 100%);
  box-shadow: 0 3px 10px rgba(230, 81, 0, .3);
}
#app:has(> .jtree) .jtree-start::after {
  content: "Lv10 到職業村找教官 —— 從下面五個家族裡選一條路走。";
  flex: 1 1 240px; min-width: 0;
  font-size: 13.5px; font-weight: 700; line-height: 1.7;
  color: var(--muted-brown);
}
#app:has(> .jtree) .jtree-start .jcard { flex: 0 0 238px; }

/* ── 五欄等高，海報才切得齊 ── */
#app:has(> .jtree) .jtree {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* grid → flex：只有 flex 的 margin-top:auto 能把「本季未開」壓到每欄最底 */
#app:has(> .jtree) .famcol {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border-width: 1.5px; border-top-width: 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffefb 0%, #fffdf8 58%, #fdf7ed 100%);
  box-shadow: var(--e2), var(--rim);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
#app:has(> .jtree) .famcol:hover { box-shadow: var(--e3), var(--rim); }

/* 家族抬頭＝海報的招牌：滿版色帶 + 頭像站上舞台 */
#app:has(> .jtree) .famhead {
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center;
  gap: 5px; text-align: center;
  margin: -16px -16px 4px;
  padding: 16px 14px 13px;
  min-height: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #fff6e8 0%, #fffdf8 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fc) 19%, #fffdf8) 0%,
    color-mix(in srgb, var(--fc) 5%, #fffdf8) 62%,
    #fffdf8 100%);
}
/* 腳下的橢圓投影：頭像才像站在那裡，不是浮著 */
#app:has(> .jtree) .famhead::after {
  content: "";
  grid-row: 1; grid-column: 1; align-self: end; justify-self: center;
  width: 78px; height: 16px; margin-bottom: 1px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110, 75, 40, .28) 0%, transparent 72%);
}
#app:has(> .jtree) .famhead .fportrait {
  position: relative; z-index: 1;
  grid-row: 1; grid-column: 1;
  width: 72px; max-height: 80px;
  filter: drop-shadow(0 4px 7px rgba(90, 60, 25, .26));
  transition: transform .34s var(--ease);
}
#app:has(> .jtree) .famcol:hover .famhead .fportrait { transform: translateY(-3px); }
#app:has(> .jtree) .famhead .fn { font-size: 20px; letter-spacing: -.01em; margin-top: 4px; }
/* ⚠️ 海盜是「主屬 STR/DEX · HP 22~26/級」兩行，其他四家一行 →
      不預留兩行的高度，整欄的卡片就會比別人低 22px，五張海報切不齊。*/
#app:has(> .jtree) .famhead .fs {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.9em;
  font-size: 12px; line-height: 1.45; color: var(--text-brown);
  max-width: 22ch; margin: 0 auto;
}

/* 一轉＝整欄的主角（.famhead 之後緊接著的那張就是 Lv10 起手職業） */
#app:has(> .jtree) .famcol > .famhead + .jcard {
  position: relative;
  flex-direction: column; align-items: center; text-align: center;
  gap: 1px;
  padding: 14px 12px 14px;
  border-radius: 16px; border-width: 1.5px;
  border-color: var(--wood-border);
  border-color: color-mix(in srgb, var(--fc) 34%, var(--wood-border));
  background: linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
  box-shadow: var(--e1), var(--rim);
}
/* 精靈圖的舞台，跟怪物圖鑑 .dex .sp 同一套語言 */
#app:has(> .jtree) .famcol > .famhead + .jcard::before {
  content: "";
  position: absolute; left: 10px; right: 10px; top: 10px; height: 104px;
  border-radius: 13px;
  border: 1px solid rgba(184, 154, 118, .2);
  background:
    radial-gradient(56% 44% at 50% 86%, rgba(130, 92, 50, .18) 0%, transparent 72%),
    linear-gradient(170deg, #fffdf8 0%, #f8eee0 100%);
  background:
    radial-gradient(56% 44% at 50% 86%, rgba(130, 92, 50, .18) 0%, transparent 72%),
    linear-gradient(170deg, color-mix(in srgb, var(--fc) 9%, #fffdf8) 0%, #f7ecdd 100%);
}
#app:has(> .jtree) .famcol > .famhead + .jcard .janim {
  --z: .56;
  position: relative; z-index: 1;
  margin: 0 0 4px;
  filter: drop-shadow(0 4px 6px rgba(90, 60, 25, .24));
  transition: transform .34s var(--ease);
}
#app:has(> .jtree) .famcol > .famhead + .jcard:hover .janim { transform: translateY(-4px); }
#app:has(> .jtree) .famcol > .famhead + .jcard .jt { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
#app:has(> .jtree) .famcol > .famhead + .jcard .n { font-size: 17px; letter-spacing: -.01em; }
#app:has(> .jtree) .famcol > .famhead + .jcard .s { font-size: 12px; }
#app:has(> .jtree) .famcol > .famhead + .jcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--e3), var(--rim);
  border-color: var(--fc);
}

/* Lv30 岔路：原本是一條 2px 的淡線，看不出「這裡要做第二次選擇」 */
#app:has(> .jtree) .famarrow {
  height: auto;
  display: flex; align-items: center; gap: 9px;
  margin: 6px 0 0;
}
#app:has(> .jtree) .famarrow::before {
  content: "Lv30 選一條路";
  position: static; width: auto; height: auto; opacity: 1;
  flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px;
  font: 800 11px/1 Nunito, "Noto Sans TC", sans-serif; letter-spacing: .03em;
  white-space: nowrap;
  color: var(--text-brown); background: #f6ece0;
  border: 1px solid var(--line-strong);
  color: color-mix(in srgb, var(--fc) 72%, #3a2410);
  background: color-mix(in srgb, var(--fc) 13%, #fffdf8);
  border-color: color-mix(in srgb, var(--fc) 38%, transparent);
}
#app:has(> .jtree) .famarrow::after {
  content: "";
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 46%, transparent), transparent);
}

/* 二轉分支：緊湊列，精靈圖也有自己的小舞台 */
#app:has(> .jtree) .famcol > .famarrow ~ .jcard {
  position: relative;
  padding: 9px 12px 9px 9px;
  gap: 11px;
  border-radius: 13px; border-width: 1.5px;
  background: #fffdf9;
  box-shadow: var(--e1), var(--rim);
}
#app:has(> .jtree) .famcol > .famarrow ~ .jcard::before {
  content: "";
  position: absolute; left: 8px; top: 7px; bottom: 7px; width: 50px;
  border-radius: 11px;
  border: 1px solid rgba(184, 154, 118, .18);
  background:
    radial-gradient(58% 46% at 50% 86%, rgba(130, 92, 50, .15) 0%, transparent 72%),
    linear-gradient(170deg, #fffdf8 0%, #f7eee1 100%);
}
#app:has(> .jtree) .famcol > .famarrow ~ .jcard .janim {
  --z: .36;
  position: relative; z-index: 1;
  margin: -6px 0;
  filter: drop-shadow(0 2px 3px rgba(90, 60, 25, .2));
  transition: transform .3s var(--ease);
}
#app:has(> .jtree) .famcol > .famarrow ~ .jcard:hover .janim { transform: translateY(-3px); }
#app:has(> .jtree) .famcol > .famarrow ~ .jcard .jt { position: relative; z-index: 1; min-width: 0; }
#app:has(> .jtree) .famcol > .famarrow ~ .jcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--e2), var(--rim);
  border-color: var(--fc);
}

/* 「6 招」被折到第二行是原本最醒目的破綻 —— 一行放不下就省略，不要換行。
   ⚠️ .jt 一定要 flex:1 + min-width:0，否則它只會取 max-content 的寬度，
      剩下的空間空著，字卻被 ellipsis 吃掉（第一版就是這樣把「招」切掉的）。*/
#app:has(> .jtree) .jcard .jt { flex: 1 1 auto; min-width: 0; }
#app:has(> .jtree) .jcard .n,
#app:has(> .jtree) .jcard .s {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#app:has(> .jtree) .famcol > .famarrow ~ .jcard .n { font-size: 14.5px; }
/* ⚠️ 量過：1440 時這行只有 107.7px 可用、字剛好 108px —— 差 1px 就會被 ellipsis
      把「招」吃掉。字級一定要留餘裕，不能照 style.css 的 12px。*/
#app:has(> .jtree) .famcol > .famarrow ~ .jcard .s { font-size: 11px; letter-spacing: -.01em; }
/* enhance.css 的 .jt:hover 位移會跟卡片自己的浮起打架 */
#app:has(> .jtree) .jcard .jt:hover { transform: none; box-shadow: none; }

/* 本季未開的三轉 / 四轉：沉到每一欄最底，五欄切齊 */
#app:has(> .jtree) .famlater {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px dashed var(--line-strong);
}
#app:has(> .jtree) .famlater > summary {
  list-style: none;
  padding: 7px 11px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.6; font-weight: 800;
  color: var(--muted-brown);
  background: rgba(184, 154, 118, .11);
  text-wrap: balance;
  transition: background .2s ease, color .2s ease;
}
#app:has(> .jtree) .famlater > summary::-webkit-details-marker { display: none; }
#app:has(> .jtree) .famlater > summary::before {
  content: "🔒"; margin-right: 5px; font-size: 10px; filter: grayscale(1); opacity: .6;
}
#app:has(> .jtree) .famlater > summary:hover { background: rgba(230, 81, 0, .1); color: var(--accent); }
#app:has(> .jtree) .famlater .jcard {
  margin-top: 8px; padding: 7px 10px; gap: 9px; border-radius: 11px;
  background: rgba(255, 253, 248, .7);
}
#app:has(> .jtree) .famlater .jcard .janim { --z: .3; margin: -6px 0; }
#app:has(> .jtree) .famlater .jcard .jemb { width: 28px; height: 28px; }
#app:has(> .jtree) .famlater .jcard .n { font-size: 13.5px; }
#app:has(> .jtree) .famlater .jcard .s { font-size: 11px; }

/* ── 五大職業導讀：職業樹回答「有哪些」，這一段回答「打起來是什麼感覺」 ── */
#app:has(> .jtree) .famslide {
  padding: 28px 30px 24px;
  border-radius: 20px; border-width: 1.5px;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ef 100%);
  box-shadow: var(--e2), var(--rim);
}
/* 左欄是家族海報、右欄是讀的內容 —— 原本整條橫的，右邊四成是空的 */
/* ⚠️ 這裡刻意用 float 而不是 grid：.fs-track 是 flex，五張 slide 會被最高的那張撐成等高，
      grid 會把撐出來的高度分給空的 row，中間裂出幾百 px 的空白（試過兩次都是這樣爆的）。
      float 是最老派也最穩的雜誌排版：左邊海報、右邊文字自己繞。*/
#app:has(> .jtree) .fs-slide { display: block; }
#app:has(> .jtree) .fs-slide::after { content: ""; display: block; clear: both; }
#app:has(> .jtree) .fs-slide > header {
  float: left; width: 248px; margin: 0 32px 14px 0;
  position: relative;
  display: grid; grid-template-columns: 1fr; justify-items: center;
  gap: 3px; text-align: center;
  margin: 0; padding: 24px 18px 20px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, #fff6e8 0%, #fffdf8 74%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 22%, #fffdf8) 0%, #fffdf8 74%);
  box-shadow: var(--e1), var(--rim);
}
#app:has(> .jtree) .fs-slide > header::after {
  content: "";
  grid-row: 1; grid-column: 1; align-self: end; justify-self: center;
  width: 108px; height: 20px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110, 75, 40, .26) 0%, transparent 72%);
}
#app:has(> .jtree) .fs-slide > header .fportrait {
  position: relative; z-index: 1;
  grid-row: 1; grid-column: 1;
  width: 122px; max-height: 136px; flex: none;
  filter: drop-shadow(0 6px 11px rgba(90, 60, 25, .28));
}
#app:has(> .jtree) .fs-slide > header > div { margin-top: 8px; }
#app:has(> .jtree) .fs-slide > p:first-of-type { margin-top: 2px; font-size: 16px; }
#app:has(> .jtree) .fs-slide > header h3 {
  font-size: 22px; font-weight: 900; letter-spacing: -.01em;
  color: var(--text-title);
  color: color-mix(in srgb, var(--fc) 62%, #2a1708);
}
#app:has(> .jtree) .fs-slide > header p { color: var(--muted-brown); font-size: 13.5px; font-weight: 700; }
/* ⚠️ max-width 在 float 版型是陷阱：它量的是整個 block 的寬（含被 float 佔走的 248px），
      所以 72ch 的段落實際只剩 360px 能排字。要拿掉，行長交給 float 後的剩餘寬度決定。*/
#app:has(> .jtree) .fs-slide > p {
  max-width: none;
  font-size: 15px; line-height: 1.95; color: #4a2d11; margin: 0 0 12px;
}
#app:has(> .jtree) .fs-slide > p:last-child { margin-bottom: 0; }
#app:has(> .jtree) .fs-nav { box-shadow: var(--e1); }

/* ═══════════════════════════════════════════════════════════════════════════
   💇 外觀頁 —— 使用者來這頁是要「看自己換上去長怎樣」，不是讀一份髮型清單
   ─────────────────────────────────────────────────────────────────────────
   原本：一個髮型一張滿版白面板往下疊，八顆頭只用掉 1440 裡的 640，右邊六成全空；
         而且要比較兩個髮型得上下捲。試穿面板捲一下就不見了 —— 試衣間沒有鏡子。
   主張：這頁是試衣間。
     ① 桌機切兩欄：左邊型錄、右邊「試衣間」整個黏住（捲到哪都看得到自己）
     ② 髮型不再是一列一面板，改成一個髮型一張色票卡，多張並排 → 真的能比較
     ③ 每一格都站上舞台（漸層底 + 腳下投影），跟怪物圖鑑同一套語言
   ═══════════════════════════════════════════════════════════════════════════ */

#app:has(> #lookbody) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 26px;
  align-items: start;
}
#app:has(> #lookbody) > h1       { grid-column: 1; grid-row: 1; }
#app:has(> #lookbody) > .sub     { grid-column: 1; grid-row: 2; }
#app:has(> #lookbody) > .filters { grid-column: 1; grid-row: 3; }
#app:has(> #lookbody) > #lookbody{ grid-column: 1; grid-row: 4; min-width: 0; }
#app:has(> #lookbody) > #tryon {
  grid-column: 2; grid-row: 1 / span 4;
  align-self: start;
  position: sticky; top: 88px;
  min-width: 0;
}

/* 型錄：一個髮型一張卡，並排比較 */
#app:has(> #lookbody) #lookbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(298px, 1fr));
  gap: 16px;
  align-items: start;
}
#app:has(> #lookbody) #lookbody > .lookrow { margin-bottom: 0; min-width: 0; }
/* 時裝（.lookgrid）與臉型 / 膚色是整排展櫃，不切欄 */
#app:has(> #lookbody) #lookbody > .lookrow:has(.lookgrid),
#app:has(> #lookbody) #lookbody > .lookgrid,
#app:has(> #lookbody) #lookbody > .empty { grid-column: 1 / -1; }

#app:has(> #lookbody) .lookrow {
  padding: 15px 16px 16px;
  border-width: 1.5px; border-radius: 18px;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ef 100%);
  box-shadow: var(--e1), var(--rim);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
#app:has(> #lookbody) .lookrow:hover {
  transform: translateY(-3px);
  box-shadow: var(--e3), var(--rim);
  border-color: var(--wood-border-dark);
}
#app:has(> #lookbody) .lr-h {
  align-items: center; gap: 9px;
  margin-bottom: 11px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
#app:has(> #lookbody) .lr-h b { font-size: 16px; }
#app:has(> #lookbody) .lr-h small {
  margin-left: auto;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: var(--muted-brown);
  background: rgba(184, 154, 118, .14);
  border: 1px solid var(--line);
}
/* 八個顏色躺成一條 4×2 的色帶，一眼比得出差別 */
#app:has(> #lookbody) .lookrow .lr-c {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
#app:has(> #lookbody) .lookrow .lr-c .lookcell { padding: 9px 4px 8px; border-radius: 12px; }
#app:has(> #lookbody) .lookrow .lr-c .lookcell img { width: 54px; height: 54px; }
#app:has(> #lookbody) .lookrow .lr-c .lookcell figcaption { font-size: 11px; margin-top: 4px; }
/* 只有一色的髮型佔一格會空掉四分之三 → 橫躺成整排，看起來才是刻意的 */
#app:has(> #lookbody) .lookrow .lr-c > .lookcell:only-child {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 14px;
}
/* layout.css 給 .lookcell img 的 margin:0 auto 會把橫躺的那張圖推開 → 要歸零才置中 */
#app:has(> #lookbody) .lookrow .lr-c > .lookcell:only-child img { margin: 0; }
#app:has(> #lookbody) .lookrow .lr-c > .lookcell:only-child figcaption { margin-top: 0; }

/* 每一格都是一個小舞台 */
#app:has(> #lookbody) .lookcell {
  position: relative;
  border-width: 1.5px;
  background:
    radial-gradient(58% 42% at 50% 84%, rgba(130, 92, 50, .14) 0%, transparent 70%),
    radial-gradient(circle at 50% 32%, #ffffff 24%, #f8efe2 100%);
  box-shadow: var(--e1), var(--rim);
}
#app:has(> #lookbody) .lookcell::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .5) 0%, transparent 44%);
}
#app:has(> #lookbody) .lookcell img {
  position: relative; z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(90, 60, 25, .22));
  transition: transform .26s var(--ease);
}
#app:has(> #lookbody) .lookcell:hover img { transform: translateY(-2px) scale(1.05); }
#app:has(> #lookbody) .lookcell:hover { box-shadow: var(--e2), var(--rim); }
#app:has(> #lookbody) .lookcell figcaption { position: relative; z-index: 1; }
#app:has(> #lookbody) .lookcell.on { box-shadow: 0 0 0 2px var(--accent-orange), var(--e2); outline: none; }

/* 時裝：整身立繪值得更大的展櫃 */
#app:has(> #lookbody) .lookrow:has(.lookgrid) .lookgrid,
#app:has(> #lookbody) #lookbody > .lookgrid {
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 13px;
}
#app:has(> #lookbody) .lookcell.body { padding: 12px 8px 11px; }
#app:has(> #lookbody) .lookcell.body img { width: 80px; height: 104px; }
#app:has(> #lookbody) .lookcell.big img { width: 70px; height: 70px; }
#app:has(> #lookbody) .lookcell .dia { display: flex; width: fit-content; margin: 6px auto 0; }

/* ── 試衣間：捲到哪都黏著，永遠看得到自己 ── */
#app:has(> #lookbody) #tryon .panel.tryon {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; margin: 0; padding: 0 0 4px;
  overflow: hidden;
  border-width: 1.5px; border-radius: 18px;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ef 100%);
  box-shadow: var(--e2), var(--rim);
}
#app:has(> #lookbody) #tryon .panel.tryon::before {
  content: "試衣間";
  display: block;
  padding: 12px 16px;
  font: 900 14px/1 Nunito, "Noto Sans TC", sans-serif; letter-spacing: .02em;
  color: var(--text-title);
  background: linear-gradient(180deg, #fff4e2 0%, #fdeed9 100%);
  border-bottom: 1px solid var(--line);
}
/* 紙娃娃：登入後的鏡子 */
#app:has(> #lookbody) #tryon .tryon-doll {
  width: auto; flex: none;
  margin: 14px 16px 0; padding: 14px;
  min-height: 208px; border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(58% 34% at 50% 88%, rgba(130, 92, 50, .17) 0%, transparent 70%),
    radial-gradient(circle at 50% 30%, #ffffff 26%, #f6ecdd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
#app:has(> #lookbody) #tryon .tryon-doll img { filter: drop-shadow(0 4px 7px rgba(90, 60, 25, .26)); }
#app:has(> #lookbody) #tryon .tryon-side { flex: 1 1 auto; min-width: 0; padding: 14px 16px 12px; }
#app:has(> #lookbody) #tryon .tryon-side h3 { font-size: 15px; }
#app:has(> #lookbody) #tryon .tryon-side h3 small { display: block; margin-top: 3px; font-weight: 600; }
#app:has(> #lookbody) #tryon .tryon-act { margin: 12px 0 8px; }
#app:has(> #lookbody) #tryon .tryon-side .muted { font-size: 12.5px; line-height: 1.75; }

/* 還沒登入：不要留一條空白橫槓，給一個「這裡會站著你的角色」的人形待機位 */
#app:has(> #lookbody) #tryon .tryon-empty {
  display: block; text-align: center;
  padding: 0 16px 18px;
  font-size: 13.5px; line-height: 1.8; font-weight: 700; color: var(--muted-brown);
}
#app:has(> #lookbody) #tryon .tryon-empty::before {
  content: "";
  display: block; height: 186px; margin: 14px 0 14px;
  border-radius: 14px; border: 1px dashed var(--line-strong);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 112'%3E%3Cg fill='none' stroke='%23b89a74' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='7 8'%3E%3Ccircle cx='40' cy='20' r='13'/%3E%3Cpath d='M40 35v40M40 45L21 57M40 45l19 12M40 75L28 103M40 75l12 28'/%3E%3C/g%3E%3C/svg%3E") center 22px / auto 132px no-repeat,
    radial-gradient(58% 30% at 50% 86%, rgba(130, 92, 50, .14) 0%, transparent 70%),
    radial-gradient(circle at 50% 30%, #ffffff 28%, #f7eee1 100%);
}
/* 文字與按鈕原本是同一個 flex 行 → 按鈕會卡在句子中間。讓它自己站一行。 */
#app:has(> #lookbody) #tryon .tryon-empty .auth-btn {
  display: flex; width: fit-content; margin: 14px auto 0; padding: 10px 20px;
}

/* 篩選列在窄的主欄裡要換行，不要被擠爆 */
#app:has(> #lookbody) .filters { margin: 12px 0 18px; }
#app:has(> #lookbody) .filters input[type=search] { flex: 1 1 180px; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   📺 探險實況 —— 使用者來這頁是要「看現在有誰在玩、他在幹嘛」
   ─────────────────────────────────────────────────────────────────────────
   原本：一塊 130px 高的暗色方塊，寫一行「目前沒有人在掛機。」，
         底下 700px 全白 —— 整頁看起來像壞掉，而且沒告訴人怎麼讓自己出現在這裡。
   主張：這頁是轉播室。
     ① livebox 變成真的播放器機殼：轉播列（HUD）／舞台（canvas）／頻道清單
     ② 正在掛機的玩家＝頻道卡，並排、可 hover、點了就進轉播
     ③ 沒人掛機不是一行灰字，是一塊「待機畫面」，並寫出怎麼開播
   ═══════════════════════════════════════════════════════════════════════════ */

#app:has(> .livebox) .sub kbd {
  display: inline-block; padding: 2px 8px; margin: 0 1px;
  border-radius: 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  background: #fffdf8; color: var(--text-brown);
  font: 800 12px/1.5 Nunito, monospace;
  box-shadow: var(--e1);
}

#app:has(> .livebox) .livebox {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 564px;
  margin-top: 16px; padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(120% 88% at 50% -12%, #1d2739 0%, #131926 52%, #0b0e16 100%);
  box-shadow:
    0 4px 10px rgba(20, 12, 4, .1),
    0 28px 68px rgba(20, 12, 4, .26),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
}
/* 有頻道卡時不要撐 564 —— 四張卡下面會留一大塊沒有用的黑。
   待機畫面與轉播中才需要那個高度。*/
#app:has(> .livebox) .livebox:has(#list > a) { min-height: 0; }
/* 機殼上緣的一道暖光，讓暗盒子不是硬貼在羊皮紙上 */
#app:has(> .livebox) .livebox::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 101, 34, .65) 22%, rgba(255, 196, 120, .5) 52%, transparent);
}

/* 轉播列 */
#app:has(> .livebox) .livebox #hud {
  align-items: center;
  gap: 8px 18px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 100%);
}
#app:has(> .livebox) .livebox #hud b {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; letter-spacing: .01em;
}
#app:has(> .livebox) .livebox #hud b::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, .55), 0 0 10px rgba(255, 77, 77, .8);
  animation: liveDot 2.4s var(--ease) infinite;
}
@keyframes liveDot {
  70%  { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0), 0 0 10px rgba(255, 77, 77, .8); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0), 0 0 10px rgba(255, 77, 77, .8); }
}
#app:has(> .livebox) .livebox #hud .st {
  padding: 3px 11px; border-radius: 999px;
  background: rgba(242, 101, 34, .18);
  border: 1px solid rgba(242, 101, 34, .4);
  color: #ffc89a; font-weight: 800;
}
#app:has(> .livebox) .livebox #hud .muted { color: #8794a9; }

/* 舞台 */
#app:has(> .livebox) .livebox > canvas {
  width: auto; align-self: stretch;
  margin: 18px 22px 2px;
  border-radius: 16px;
  background: #0d1320;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 頻道清單 */
#app:has(> .livebox) .livebox #list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  margin: 0; padding: 18px 22px 22px;
  align-content: start;
}
#app:has(> .livebox) .livebox #list a {
  display: flex; flex-direction: column; gap: 5px;
  margin: 0; padding: 15px 17px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .018) 100%);
  transition: transform .26s var(--ease), background .26s ease, border-color .26s ease, box-shadow .26s ease;
}
#app:has(> .livebox) .livebox #list a::before {
  content: "▶ 進入轉播";
  order: 2;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  color: #ff9a5c;
  opacity: .55; transition: opacity .26s ease;
}
#app:has(> .livebox) .livebox #list a:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .085);
  border-color: rgba(242, 101, 34, .5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
}
#app:has(> .livebox) .livebox #list a:hover::before { opacity: 1; }
#app:has(> .livebox) .livebox #list a b { color: #fff; font-size: 16px; letter-spacing: -.01em; }
#app:has(> .livebox) .livebox #list a .muted { color: #8f9bb0; font-size: 12.5px; line-height: 1.7; }

/* 待機畫面：沒人開播時，這裡是整頁唯一的內容，不能只留一行灰字 */
/* 沒有節目時待機畫面要撐滿整個機殼 —— 不然下面會留一大塊沒有意義的黑 */
#app:has(> .livebox) .livebox #list:has(> p.muted) { align-content: stretch; }
#app:has(> .livebox) .livebox #list > p.muted,
#app:has(> .livebox) .livebox .empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; padding: 40px 28px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, .15);
  color: #9aa6ba; font-size: 15.5px; font-weight: 800; line-height: 1.7;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 12px, transparent 12px 24px),
    radial-gradient(64% 74% at 50% 38%, rgba(92, 124, 176, .16) 0%, transparent 72%);
}
#app:has(> .livebox) .livebox #list > p.muted::before,
#app:has(> .livebox) .livebox .empty::before {
  content: "";
  display: block; width: 88px; height: 88px; margin: 0 auto 20px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, .16);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23a9b6cb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2.5'/%3E%3Cpath d='M8 3.5l4 3.5 4-3.5'/%3E%3Cpath d='M10.5 11.4v4.2l4-2.1z' fill='%23a9b6cb' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center / 44px no-repeat,
    rgba(255, 255, 255, .04);
}
#app:has(> .livebox) .livebox #list > p.muted::after,
#app:has(> .livebox) .livebox .empty::after {
  content: "在 Discord 打 /探險 開始掛機 —— 結算時會錄下 60 秒走位，你的角色就會出現在這裡。";
  display: block; max-width: 36ch; margin: 12px auto 0;
  font-size: 13px; font-weight: 600; line-height: 1.95; color: #7c8798;
}

} /* @media (min-width: 1024px) */

/* ── 無障礙：關掉動態時不靠動畫顯示任何東西（上面沒有 opacity:0 的起始狀態，
      這裡只把會持續跑的脈動關掉，內容一律維持可見）────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #app:has(> .livebox) .livebox #hud b::before { animation: none; }
  #app:has(> .livebox) .livebox #list a::before { opacity: 1; }
}

/* 大螢幕：試衣間可以寬一點，型錄也放得下第三欄 */
@media (min-width: 1360px) {
  #app:has(> #lookbody) { grid-template-columns: minmax(0, 1fr) 324px; column-gap: 28px; }
}

/* ── 1024~1279：五欄家族海報會擠到只剩 180px，精靈圖與字級要一起收 ─────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  #app:has(> .jtree) .jtree { gap: 10px; }
  #app:has(> .jtree) .famcol { padding: 12px; }
  #app:has(> .jtree) .famhead { margin: -12px -12px 4px; padding: 13px 10px 11px; }
  #app:has(> .jtree) .famhead .fportrait { width: 62px; max-height: 70px; }
  #app:has(> .jtree) .famhead::after { width: 66px; }
  #app:has(> .jtree) .famhead .fn { font-size: 17px; }
  #app:has(> .jtree) .famhead .fs { font-size: 11.5px; }
  #app:has(> .jtree) .famcol > .famhead + .jcard { padding: 12px 8px; }
  #app:has(> .jtree) .famcol > .famhead + .jcard::before { left: 7px; right: 7px; height: 92px; }
  #app:has(> .jtree) .famcol > .famhead + .jcard .janim { --z: .5; }
  #app:has(> .jtree) .famcol > .famhead + .jcard .n { font-size: 15.5px; }
  #app:has(> .jtree) .famarrow::before { font-size: 10px; padding: 3px 7px; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard { padding: 8px 9px 8px 7px; gap: 8px; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard::before { left: 6px; width: 42px; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard .janim { --z: .3; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard .n { font-size: 13.5px; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard .s { font-size: 10.5px; letter-spacing: -.02em; }
  #app:has(> .jtree) .famcol > .famarrow ~ .jcard { padding-right: 8px; }
  #app:has(> .jtree) .famlater > summary { font-size: 11px; padding: 6px 8px; }
  /* 五大職業：窄螢幕不夠繞排，海報改回整排在上 */
  #app:has(> .jtree) .fs-slide > header { float: none; width: auto; max-width: 260px; margin: 0 auto 16px; }
  #app:has(> .jtree) .famslide { padding: 22px 22px 20px; }
}