/* 副本資料庫（/dungeons 和 /dungeons/<地圖ID>）
 * 頁面由 scripts/build-dungeons.mjs 產生；顏色、字型、卡片沿用 site.css。副本圖片是遊戲內地城手冊的圖（暴雪官方素材）。
 */

/* ---------- 共用：狀態標籤、沒有圖的副本 ---------- */
.chip.dg-st.listed{color:var(--gold-hi);border-color:var(--line-gold);background:rgba(201,163,91,.1)}
.chip.dg-st.later{color:#ffb38a;border-color:rgba(240,140,90,.5);background:rgba(200,100,50,.14)}
.chip.dg-st.old{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03)}
.chip.dg-new{color:#1d1406;border-color:#e6c47f;background:linear-gradient(180deg,#f0d493,#c49a4f)}
.art.ph{display:grid;place-items:center;color:var(--gold-deep);border:1px solid var(--line-soft);
  background:repeating-linear-gradient(135deg,rgba(201,163,91,.05) 0 6px,transparent 6px 12px),linear-gradient(180deg,#1d160f,#120e0a)}
.art.ph svg{width:22px;height:22px}

/* ---------- 列表 ---------- */
.dg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:0 0 14px}
.dg-bar .tg{display:inline-flex;align-items:center;gap:8px}
.dg-bar .lab{font-size:12.5px;color:var(--faint)}
.dg-bar .seg button:disabled{opacity:.35;cursor:default}
.dg-bar .seg button:disabled:hover{color:var(--muted)}
.dg-count{margin-left:auto;font-size:12.5px;color:var(--faint)}
.dg-sec,.dg-old,.dg-empty{margin:0 0 14px}
.dg-list{list-style:none;margin:0;padding:0 14px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.dg-list>li{display:flex}   /* 同一列的格子一樣高（名字比較長、換行的那格不會凸出來） */
.dg-row{flex:1;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;padding:5px 10px 5px 5px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.015)}
.dg-row:hover{color:inherit;border-color:var(--line);background:rgba(255,255,255,.04)}
.dg-row:hover .nm b{color:var(--gold-hi)}
.dg-row .art{width:96px;height:51px;border-radius:5px;object-fit:cover;background:#120e0a}
.dg-row .tx{min-width:0}
.dg-row .nm{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px}
.dg-row .nm b{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.3;color:var(--text)}
.dg-row .nm .lv{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted)}   /* 建議等級，寫法和遊戲組隊清單一樣（20 - 30） */
.dg-row .mt{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-row .mt i{font-style:normal;color:var(--faint)}
.dg-empty{padding:16px 18px;font-size:13.5px;color:var(--faint)}
.dg-sec-note{margin:-4px 18px 10px;font-size:12.5px;line-height:1.6;color:#ffb38a}   /* 團隊副本的加註（封測時組隊清單還看不到） */
.dg-old summary{display:flex;align-items:center;gap:11px;padding:13px 18px;cursor:pointer;list-style:none}
.dg-old summary::-webkit-details-marker{display:none}
.dg-old summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--gold)}
.dg-old[open] summary::after{content:"−"}
.dg-old summary .ic{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid var(--line);border-radius:7px;color:var(--faint);background:linear-gradient(180deg,#231a12,#14100b)}
.dg-old summary .ic svg{width:17px;height:17px}
.dg-old summary .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 11px}
.dg-old summary b{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--muted)}
.dg-old summary .note{font-size:12px;color:var(--faint)}
.dg-old .dg-row{opacity:.82}
.dg-notes{display:grid;gap:4px;padding:4px 2px 0;font-size:12.5px;line-height:1.7;color:var(--faint)}
.dg-notes p{margin:0}
.dg-notes b{font-weight:700;color:var(--muted)}

/* ---------- 每個副本一頁 ---------- */
.dg-page>.crumbs{padding:22px 0 10px}   /* 副本頁的麵包屑（class 要剛好是 crumbs，check-seo 才比對得到） */
.dg-hero{position:relative;display:flex;align-items:center;gap:22px;min-height:128px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--panel2)}
.dg-hero::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.dg-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,9,7,.9) 0%,rgba(11,9,7,.72) 50%,rgba(11,9,7,.4) 100%)}
.dg-hero-bg{position:absolute;left:-40px;top:-40px;z-index:-2;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(18px) saturate(1.15);opacity:.6}
.dg-hero-tx{flex:1;min-width:0}
.dg-hero h1{margin:4px 0 0;font-family:var(--serif);font-weight:900;font-size:34px;line-height:1.2;letter-spacing:.04em}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.dg-hero-note{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:#ffb38a}
.dg-pic{width:166px;height:88px;flex:none;border-radius:7px;border:1px solid var(--line-gold);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.dg-pic.ph svg{width:30px;height:30px}
.dg-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;margin:12px 0 0;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--line-soft)}
.dg-facts div{padding:9px 16px;background:#130f0b}
.dg-facts dt{font-size:12px;color:var(--faint)}
.dg-facts dd{margin:2px 0 0;font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.3;color:var(--text)}
.dg-facts dd small{margin-left:3px;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--muted)}
.dg-facts dd small.sub{display:block;margin:0;font-size:11.5px;color:var(--faint)}
.dg-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;padding:18px 0 0;align-items:start}
.dg-cols>*{min-width:0}
.dg-bosses{list-style:none;margin:0;padding:0}
.dg-bosses.two{columns:2;column-gap:22px}
.dg-bosses li{display:flex;align-items:baseline;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line-soft);break-inside:avoid;font-size:14.5px;font-weight:700;line-height:1.4}
.dg-bosses .n{flex:none;min-width:20px;font-family:var(--latin);font-weight:700;font-size:13px;color:var(--gold);text-align:right}
.dg-info{margin:0;display:grid;gap:12px}
.dg-info div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.6}
.dg-info dt{padding-top:1px;font-size:13px;color:var(--faint)}
.dg-info dd{margin:0;color:var(--text)}
.dg-info dd small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;color:var(--faint)}
.dg-info .dg-gf{display:block}
.dg-pn{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:18px 0 0}
.dg-pn a{display:block;padding:9px 14px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.015);font-family:var(--serif);font-weight:700;font-size:15px}
.dg-pn a:hover{border-color:var(--line)}
.dg-pn small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--faint)}
.dg-pn .next{text-align:right}
.dg-pn .all{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--gold)}
.dg-src{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--faint)}

/* ---------- 版面 ---------- */
@media (min-width:1080px){ .dg-list{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){
  .dg-list{grid-template-columns:1fr}
  .dg-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dg-bar{gap:8px 14px}
  .dg-bar .tg{flex-basis:100%}
  .dg-count{display:none}
  .dg-list{padding:0 10px 10px;gap:6px}
  .dg-row{grid-template-columns:78px minmax(0,1fr);gap:10px;padding:4px 8px 4px 4px}
  .dg-row .art{width:78px;height:41px}
  .dg-row .nm b{font-size:15.5px}
  .dg-row .mt{margin-top:1px;font-size:12px;white-space:normal}
  .dg-old summary{padding:12px 14px}
  .dg-sec-note{margin:-2px 14px 8px;font-size:12px}
  .dg-hero-note{font-size:12px}
  .dg-page>.crumbs{padding:16px 0 8px}
  .dg-hero{gap:12px;min-height:0;padding:14px 14px 14px 16px}
  .dg-hero h1{font-size:25px;letter-spacing:.02em}
  .dg-hero .eyebrow{font-size:10px;letter-spacing:.22em}
  .dg-pic{width:96px;height:51px}
  .dg-pic.ph svg{width:22px;height:22px}
  .dg-facts{margin-top:10px;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .dg-facts div:last-child:nth-child(3n+2){grid-column:span 2}   /* 五格時最後一格補滿那一列 */
  .dg-facts div{padding:7px 9px}
  .dg-facts dd{font-size:15.5px}
  .dg-facts dd small{font-size:11px}
  .dg-cols{gap:12px;padding-top:12px}
  .dg-bosses li{font-size:14px;padding:5px 0}
  .dg-bosses.two{column-gap:14px}
  .dg-info div{grid-template-columns:60px minmax(0,1fr);gap:10px}
  .dg-pn{grid-template-columns:1fr 1fr;padding-top:12px}
  .dg-pn .all{grid-column:1 / -1;grid-row:2;text-align:center}
  .dg-pn a{padding:8px 11px;font-size:14px}
}