.spec-medals { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, #514b3d); }
.spec-medals-label { display: block; color: var(--muted, #b3aea4); font-size: 12px; margin-bottom: 8px; }
.spec-medals-list { display: flex; flex-wrap: wrap; gap: 10px; }
.spec-medal { position: relative; min-width: 0; border: 0; }
.spec-medal > summary { display: block; list-style: none; cursor: pointer; border-radius: 8px; padding: 0; }
.spec-medal > summary::-webkit-details-marker { display: none; }
.spec-medal > summary::before, .spec-medal > summary::after { display: none !important; }
.spec-medal > summary:focus-visible { outline: 2px solid var(--gold, #c9a45e); outline-offset: 3px; }
.spec-medal img { display: block; width: 66px; height: 82px; object-fit: contain; filter: drop-shadow(0 3px 4px #0005); transition: transform .15s ease; }
.spec-medal > summary:hover img { transform: translateY(-2px); }
.spec-medal-info { position: absolute; z-index: 12; left: 0; top: calc(100% + 8px); width: min(280px, 70vw); box-sizing: border-box; padding: 16px; border: 1px solid var(--gold, #c9a45e); border-radius: 8px; background: var(--bg, #15191e); color: var(--text, #eee5d3); box-shadow: 0 8px 24px #0005; overflow-wrap: anywhere; }
.spec-medal-info strong { display: block; font-size: 16px; }
.spec-medal.align-end .spec-medal-info { left: auto; right: 0; }
.spec-medal-info p { margin: 8px 0 !important; font-size: 14px !important; white-space: pre-line; }
.spec-medal-info time { display: block; margin-top: 8px; font-size: 12px; color: var(--muted, #b3aea4); }
.spec-medal-info a { display: inline-block; margin-top: 10px; color: var(--gold, #c9a45e); }
.medal-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.medal-editor label { display: grid; gap: 6px; }
.medal-editor .medal-wide { grid-column: 1 / -1; }
.medal-editor .medal-publish { display: flex; align-items: center; gap: 8px; }
.medal-editor .medal-publish input { width: auto; }
.medal-preview { display: flex; align-items: center; gap: 16px; min-height: 100px; margin: 16px 0; }
.medal-preview .spec-medal-info { position: static; box-shadow: none; }
.medal-preview .spec-medal { display: flex; gap: 16px; align-items: center; }
.medal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .medal-editor { grid-template-columns: 1fr; } }
.support-spec { position: relative; }
.support-spec.has-spec-medals .support-spec-heading { padding-right: 30px; }
.support-spec .spec-medals { position: absolute; top: 10px; right: 12px; left: 12px; margin: 0; padding: 0; border: 0; }
.support-spec .spec-medals-list { justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.spec-medal-compact > summary { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.spec-medal-compact > summary img { width: 20.625px; height: 25.625px; filter: drop-shadow(0 0 3px #e9ba6659) drop-shadow(0 0 7px #e9ba662e); }
.spec-medal-compact > summary:hover img, .spec-medal-compact > summary:focus-visible img { transform: scale(1.15); }
.spec-medal-tooltip { display: none; position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: max-content; max-width: min(230px, 65vw); padding: 8px 12px; border: 1px solid var(--gold); border-radius: 6px; background: var(--bg, #15191e); color: var(--text); font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 16px #0005; }
.spec-medal-compact > summary:hover .spec-medal-tooltip, .spec-medal-compact > summary:focus-visible .spec-medal-tooltip { display: block; }
.medal-dialog { box-sizing: border-box; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px; border: 1px solid var(--gold, #c9a45e); border-radius: 12px; background: var(--bg, #15191e); color: var(--text, #eee5d3); box-shadow: 0 16px 60px #0008; }
.medal-dialog::backdrop { background: #000a; }
.medal-dialog-art { display: block; width: 320px; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto 16px; }
.medal-dialog-label { color: var(--muted); font-size: 12px; }
.medal-dialog .spec-medal-info { position: static; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.medal-dialog .spec-medal-info strong { font-size: 24px; line-height: 1.3; }
.medal-dialog .spec-medal-info p { font-size: 16px !important; line-height: 1.6; }
.medal-dialog > button { display: block; margin: 24px 0 0 auto; padding: 10px 20px; border: 1px solid var(--gold); border-radius: 5px; background: #c9a45e18; color: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .spec-medal img { transition: none; } }