/* C prototype: one geometry, original unfiltered WebP, five material tokens. */
.vp-material-badge {
  --metal-dark:#70412c; --metal-mid:#b67b51; --metal-light:#f2d2a3;
  --well:#ece1cd; --facet:transparent;
  position:relative; display:inline-grid; place-items:center; isolation:isolate; overflow:hidden;
  width:var(--badge-size,112px); aspect-ratio:1; flex:none; vertical-align:middle;
  padding:0; border:1px solid var(--metal-dark); border-radius:50%;
  background:conic-gradient(from -30deg,var(--metal-mid),var(--metal-light) 12%,var(--metal-mid) 23%,var(--metal-dark) 39%,var(--metal-light) 52%,var(--metal-mid) 62%,var(--metal-dark) 78%,var(--metal-light) 91%,var(--metal-mid));
  box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 2px #0005,0 3px 0 var(--metal-dark),0 9px 13px -7px #17281e66;
}
.vp-material-badge[data-level="silver"] { --metal-dark:#687276; --metal-mid:#b2babe; --metal-light:#f5f3ea; --well:#e8e9e4; }
.vp-material-badge[data-level="gold"] { --metal-dark:#7b5b22; --metal-mid:#c4a052; --metal-light:#fff0bc; --well:#f1e7cb; }
.vp-material-badge[data-level="platinum"] { --metal-dark:#526967; --metal-mid:#9db8af; --metal-light:#effff4; --well:#e3ede6; }
.vp-material-badge[data-level="diamond"] { --metal-dark:#536d85; --metal-mid:#a1b7d0; --metal-light:#f6fcff; --well:#e6edf2; --facet:#edfaff66; }
.vp-material-badge::before {
  content:""; position:absolute; inset:4%; border:1px solid #fff7; border-radius:50%;
  background:repeating-conic-gradient(from 15deg,transparent 0deg 29deg,var(--facet) 30deg 45deg,transparent 46deg 60deg);
}
.vp-material-badge__well {
  position:relative; display:grid; place-items:center; width:77%; aspect-ratio:1;
  border-radius:50%; border:1px solid var(--metal-dark);
  background:radial-gradient(ellipse at 35% 24%,#fff9,transparent 67%),var(--well);
  box-shadow:0 0 0 1px #fff8,inset 0 2px 5px #29382e30;
}
.vp-material-badge img { display:block; width:84%; height:84%; aspect-ratio:1; object-fit:contain; flex:none; filter:none; }
.vp-material-badge__glint { pointer-events:none; position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.vp-material-badge__glint::after { content:""; display:block; position:absolute; inset:-30%; transform:rotate(-22deg); background:linear-gradient(90deg,transparent 42%,#fff9 50%,transparent 58%); }
.vp-material-badge__glint { opacity:0; }
@media (forced-colors:active) {
  .vp-material-badge,.vp-material-badge__well { border:2px solid CanvasText; background:Canvas; box-shadow:none; }
  .vp-material-badge::before,.vp-material-badge__glint { display:none; }
}

/* Preview adapters preserve the existing small-image slots and reset legacy art. */
.vp-material-badge .vp-material-badge__well > img {
  display:block; width:84%; height:84%; max-width:none; max-height:none;
  grid-row:auto; padding:0; border:0; background:none; box-shadow:none;
  border-radius:0; object-fit:contain; filter:none;
}
:is(.vp-medallion,.vp-mission-art,.vp-notification-badge,.vp-detail-medal):has(.vp-material-badge) {
  border:0; background:none; padding:0; box-shadow:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
}
.vp-medallion:has(.vp-material-badge) .vp-material-badge { --badge-size:66px; }
.vp-mission-art:has(.vp-material-badge) .vp-material-badge { --badge-size:42px; }
.vp-notification-badge:has(.vp-material-badge) .vp-material-badge { --badge-size:58px; }
.vp-detail-medal:has(.vp-material-badge) { width:fit-content; height:auto; flex-direction:column; margin:4px auto 18px; }
.vp-detail-medal .vp-material-badge { --badge-size:110px; }
.vp-task-grid > button > .vp-badge-wrapper { grid-row:span 2; }
.vp-task-grid .vp-badge-wrapper > .vp-material-badge { --badge-size:38px; }
.vp-task-grid > button > strong { position:relative; }
.vp-unlock-reveal .vp-material-badge { --badge-size:95px; }
.vp-unlock-reveal,.vp-unlock-reveal .vp-ink-seal,.vp-detail-medal .vp-ink-seal { animation:none; }
.vp-chapter-hero .vp-medallion:has(.vp-material-badge),
.vp-chapter-hero .vp-medallion:has(.vp-material-badge):hover { transform:none; transition:none; }
.vp-detail-actions { display:flex; flex-direction:column; gap:4px; }
.vp-detail-actions .vp-button { min-height:44px; }
.vp-badge-level { display:block; text-align:center; font-size:13px; color:var(--muted); }
.vp-chapter-copy > .vp-kicker,.vp-notification-item .vp-kicker { display:block; }
@media(max-width:370px) {
  .vp-task-grid > button > .vp-badge-wrapper { grid-row:auto; justify-self:start; }
}
@media(forced-colors:active) {
  .vp-material-badge,.vp-material-badge__well { border:2px solid CanvasText; background:Canvas; box-shadow:none; }
}

/* 通知：多枚的系列以徽章疊放表示，最高階壓在最上層（z-index 隨階級遞增）。 */
.vp-notification-list { --stack-step:16px; }
.vp-notification-list .vp-notification-item { grid-template-columns: calc(58px + var(--stack-step) * (var(--stack-layers, 1) - 1)) minmax(0,1fr); }
.vp-notification-badge.is-stack:has(.vp-material-badge) { position:relative; display:block; width:calc(58px + var(--stack-step) * (var(--layers) - 1)); height:58px; }
.vp-notification-badge.is-stack .vp-stack-layer { position:absolute; top:0; left:calc(var(--i) * var(--stack-step)); z-index:calc(var(--i) + 1); display:block; width:58px; height:58px; }
.vp-notification-badge.is-stack .vp-stack-layer:not(:last-of-type) { filter:brightness(.88) saturate(.9); }
.vp-notification-badge.is-stack .vp-stack-layer:last-of-type { filter:drop-shadow(-3px 1px 3px rgba(20,40,30,.35)); }
.vp-notification-count { position:absolute; right:-4px; bottom:-4px; z-index:20; min-width:22px; height:22px; padding:0 5px; border-radius:11px; background:#294936; color:#f7f4eb; font-size:12px; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.vp-notification-note { color:var(--muted); }