/* 寶島煉成 —— 發現卡（元素卡 Modal／分享）。
   乾淨實心宣紙；不用 wash_rect 當底（該圖中心 alpha≈40%，暗幕會透成髒斑）。
   設計寬 360；高度隨內容，按鈕在副標下方。不顯示配方（多路徑會對不上）。 */
.dcard {
  --tint: #c8452c;
  position: relative; isolation: isolate;
  width: 360px; min-height: 0;
  border: none; border-radius: 2px; overflow: visible;
  display: flex; flex-direction: column; align-items: stretch;
  padding-bottom: 14px;
  background-color: #fcfaf5;
  background-image:
    linear-gradient(var(--tint), var(--tint)),
    linear-gradient(rgba(252,250,245,0.94), rgba(252,250,245,0.94)),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 16%, transparent) 0%, transparent 58%),
    url("assets/ui/xuan.webp");
  background-size: 100% 8px, cover, auto, cover;
  background-repeat: no-repeat;
  background-position: top center, center, center, center;
  box-shadow: 0 16px 40px rgba(42,35,24,0.32);
  font-family: var(--font); color: #2a2318; user-select: none;
}
.dcard::before, .dcard::after { display: none; }
.dcard .dc-top {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 20px 18px 0; font-size: 11px; letter-spacing: 0.18em; color: rgba(42,35,24,0.6);
}
.dcard .dc-top .brand { font-weight: 800; font-family: var(--serif, serif); color: #c8452c; }
.dcard .dc-top .cat {
  border: 1px solid var(--tint); color: var(--tint); border-radius: 999px;
  padding: 2px 10px; letter-spacing: 0.12em; font-weight: 700;
}
.dcard .dc-art { height: 200px; display: flex; align-items: center; justify-content: center; flex: none; }
.dcard .dc-art img { width: 180px; height: 180px; filter: drop-shadow(0 12px 14px rgba(42,35,24,0.28)); }
.dcard .dc-art .emo { font-size: 120px; line-height: 1; }
.dcard .dc-name { text-align: center; font-family: var(--serif, serif); font-size: 30px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.1; }
.dcard .dc-quip {
  text-align: center; font-size: 12.5px; color: rgba(42,35,24,0.7);
  padding: 6px 28px 0; line-height: 1.45;
}
/* 放到煉成台／分享：緊貼副標下方 */
.dcard .dc-actions {
  display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 0 16px; min-height: 0;
}
.dcard .dc-actions:empty { display: none; margin: 0; }
.dcard .dc-actions .cardBtns {
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 0;
}
.dcard .dc-foot {
  position: static; text-align: center; margin-top: 14px;
  font-size: 10.5px; letter-spacing: 0.1em; color: rgba(42,35,24,0.5); font-family: var(--serif, serif);
}
/* 回站的路：分享圖唯一的 CTA，所以用朱紅、比統計行重 */
.dcard .dc-site {
  position: static; text-align: center; margin-top: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--tint);
}
.dcard .dc-new {
  position: absolute; top: 14px; right: 12px; z-index: 3; isolation: isolate;
  width: 56px; height: 56px; box-sizing: border-box; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr; place-items: center;
  background: #c8452c; color: #fff;
  font-family: var(--serif, serif); font-size: 18px; font-weight: 700; line-height: 1;
  border-radius: 4px; transform: rotate(-8deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42), 0 3px 8px rgba(42,35,24,0.28);
}
.dcard .dc-new span { display: block; }

.dcard.rare { --tint: #b8860b; }
.dcard.rare {
  background-color: #fbf6ea;
  background-image:
    linear-gradient(#b8860b, #b8860b),
    linear-gradient(rgba(251,246,234,0.94), rgba(251,246,234,0.94)),
    radial-gradient(circle at 50% 38%, rgba(184,134,11,0.16) 0%, transparent 58%),
    url("assets/ui/xuan.webp");
  background-size: 100% 8px, cover, auto, cover;
  background-repeat: no-repeat;
  background-position: top center, center, center, center;
  box-shadow: 0 16px 40px rgba(184,134,11,0.28);
}
.dcard.rare .dc-art img { width: 200px; height: 200px; }
.dcard.rare .dc-name { color: #7a4d0c; }
.dcard.rare .dc-ribbon {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.35em; color: #c8452c; font-weight: 800; font-family: var(--serif, serif);
}