.creature-skin { margin: 1.25rem 0; border-color: rgba(139,185,124,.35); scroll-margin-top: var(--skin-scroll-offset, 9rem); }
.creature-skin > .muted-text { margin-top: .75rem; }
.skin-palette { margin: 1rem 0; }
.skin-swatches { display: flex; max-width: 22rem; overflow: hidden; border-radius: .65rem; border: 1px solid rgba(255,255,255,.15); }
.skin-swatches span { flex: 1; height: 2rem; }
.skin-palette figcaption { font-size: .8rem; margin-top: .4rem; }
.creature-skin .primary-button { max-width: 100%; white-space: normal; text-align: center; }
.skin-feedback { margin-top: .65rem; }
.skin-instructions { margin-top: 1rem; padding: 1rem; border: 1px solid #a99866; border-radius: .6rem; background: rgba(169, 152, 102, .08); line-height: 1.65; }
.skin-import-notice { margin-top: .65rem; color: #e4d5ac; font-size: .875rem; }
.skin-instructions summary { cursor: pointer; font-weight: 600; }
.skin-instructions ol { padding-left: 1.4rem; list-style: decimal; margin-top: .6rem; }
.creature-skin button:disabled { opacity: .65; cursor: wait; }

.skin-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.5rem; margin-top: 1rem; }
.skin-variant { min-width: 0; }
.skin-variant h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .65rem; }
.skin-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .85rem; }
.skin-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: .5rem; background: rgba(0,0,0,.2); }
.skin-gallery a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 480px) { .skin-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.skin-shortcut { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .5rem .8rem; border: 1px solid rgba(139,185,124,.25); border-radius: .65rem; font-size: .875rem; }
.skin-shortcut:hover { border-color: rgba(139,185,124,.65); }
.skin-previews { margin: .75rem 0; }
.skin-previews summary { cursor: pointer; font-size: .9rem; }
.skin-previews .skin-gallery { margin-top: .65rem; }

.skin-compatibility { margin-top: .65rem; color: #b5d7a8; font-weight: 600; font-size: .9rem; }

.skin-mobile-notice { display: none; margin-top: .75rem; }
.skin-mobile-device .skin-desktop-actions { display: none; }
.skin-mobile-device .skin-mobile-notice { display: block; }

@media (prefers-reduced-motion: no-preference) {
    html:has(.creature-skin) { scroll-behavior: smooth; }
}

.creature-card-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.creature-card .creature-card-title h3 { margin-top: 0; }
.creature-card-skin-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; object-fit: contain; }

.creature-card-icons { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; }