/* Kalos live layer: token images inside the existing .art boxes, tx explorer link, and the two crop fixes. */
html.live-loading #app{opacity:0}
html.live-loading #notice-count{visibility:hidden} /* the fixture's sample notices, removed by the first snapshot apply */
/* app.js paints the fixture marketplace into the hidden #app before the snapshot replaces it: its sprite sheets must not download. */
html.live-loading #app *,html.live-loading #app *::before,html.live-loading #app *::after{background-image:none!important}
#app{transition:opacity .18s ease}

/* art(): <img> inside the art box. Low-specificity positioning so absolute .art boxes stay absolute. */
.art.live-img{background-image:none!important}
:where(.art.live-img){position:relative;overflow:hidden}
.art.live-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit;pointer-events:none;user-select:none}
/* card(): inline background image on the card button. */
.art.live-bg,.art.sprite-heroes.live-bg{background-image:var(--live-img)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.sprite-marble.live-img>img,.sprite-realms.live-img>img,.sprite-marble.live-bg,.sprite-realms.live-bg,.sprite-portraits.live-img>img,.sprite-portraits.live-bg{image-rendering:auto}
.sprite-heroes.live-img>img,.sprite-heroes.live-bg{image-rendering:pixelated}

/* Bug [a]: Discover side cards. Square slices in a non-square box: show the whole subject. */
.collection-preview>.art.live-img{background:transparent}
.collection-preview>.art.live-img>img{object-fit:contain;object-position:center bottom}
.preview-heroes>.art.live-img{background:#5a1612}
.preview-marble>.art.live-img,.preview-genesis>.art.live-img{background:#0f1f22}
.preview-marble>.art.live-img>img{object-fit:cover;object-position:center top}
.preview-realms>.art.live-img>img{object-fit:cover;object-position:center}

/* Bug [b]: "THE ART · Myth, carved in light" — keep the goddess's crown in frame. */
.story-divine>.art.live-img>img{object-fit:cover;object-position:center top}
.story-modal-art .art.live-img>img{object-fit:cover;object-position:center top}

/* Transaction panel extras. */
.transaction-state .live-explorer{display:inline-flex;align-items:center;gap:6px;margin:4px auto 10px}
.transaction-state .live-explorer svg{width:14px;height:14px}
.live-address{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.connect-dialog .spinner{display:inline-block;vertical-align:-3px;margin-right:6px}