.set-gallery-page { max-width: 1500px; margin: 0 auto 60px; padding: 24px; color: var(--text-dark); overflow-x: clip; }
.set-gallery-hero { max-width: 900px; margin: 0 auto 24px; text-align: center; }
.set-gallery-back { display: flex; width: fit-content; min-height: 44px; gap: 8px; margin: 0 auto 24px; text-decoration: none; }
.set-gallery-back:focus-visible { outline: 3px solid #7543c5; outline-offset: 5px; }
.set-gallery-hero > span { display: inline-block; padding: 5px 10px; background: #25252d; color: white; font-weight: 900; letter-spacing: .12em; transform: rotate(-2deg); }
.set-gallery-description { max-width: 60ch; margin-inline: auto; white-space: pre-line; overflow-wrap: anywhere; }
.set-gallery-hero h1 { margin: 18px 0 8px; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; }
.set-gallery-hero p { font-weight: 650; }
/* The set's booster, as the shop sells it: the pack beside a line on what is left and where, and the door to its store. */
.set-booster { display: grid; gap: 10px; justify-items: start; width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 14px 22px 14px 16px; border: 3px solid var(--ink-border); border-radius: 14px; background: var(--tint-yellow); box-shadow: 5px 5px 0 var(--ink-shadow); text-align: left; }
.set-booster[hidden] { display: none; }
.set-booster-label { padding: 3px 8px; background: #25252d; color: #fff; font-size: .62rem; font-weight: 950; letter-spacing: .14em; }
.set-booster-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.set-booster-row + .set-booster-row { padding-top: 10px; border-top: 2px dashed var(--ink-border); }
.set-booster-pack .booster-pack { --pack-width: 84px; }
.set-booster-copy { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.set-booster-name { font-size: 1rem; }
.set-booster-copy p { margin: 0; font-size: .92rem; }
.set-booster-door { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 14px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--pastel-yellow); color: var(--text-dark); font-weight: 900; text-decoration: none; box-shadow: 3px 3px 0 var(--ink-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.set-booster-door::after { content: '→'; }
.set-booster-door:hover { box-shadow: 1px 1px 0 var(--ink-shadow); transform: translate(2px, 2px); }
.set-booster-door:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
/* The maker's offer for the whole stock at half price (#1087), arriving with a small bounce. */
.set-whole-stock { margin-top: 4px; padding: 8px 14px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--pastel-peach); color: var(--text-dark); font: inherit; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--ink-shadow); animation: set-whole-stock-in 360ms cubic-bezier(.3, 1.5, .5, 1); transition: transform .12s ease, box-shadow .12s ease; }
.set-whole-stock:hover { box-shadow: 1px 1px 0 var(--ink-shadow); transform: translate(2px, 2px); }
.set-whole-stock:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
@keyframes set-whole-stock-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.set-whole-stock-dialog { width: min(440px, calc(100vw - 32px)); }
.is-glitched .set-booster { border-color: #000; background: #1a1a1e; color: #d6d6cc; box-shadow: 5px 5px 0 #000; }
.set-gallery-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.set-gallery-stats > * { padding: 8px 12px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); }
.set-gallery-stats b { background: var(--pastel-blue); }
/* A set's ? side, as its binder turns over. */
.set-gallery-flip { display: block; min-height: 36px; margin: 14px auto 0; padding: 6px 14px; border: 2px solid var(--ink-border); border-radius: 7px; background: #1a1a1e; color: #d6d6cc; font: inherit; font-size: .85rem; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.set-gallery-flip[hidden] { display: none; }
.set-gallery-flip[aria-pressed="true"] { background: var(--white); color: var(--text-dark); }
.set-gallery-flip:focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
.is-glitched .set-gallery-stats > * { border-color: #000; background: #1a1a1e; color: #d6d6cc; box-shadow: 3px 3px 0 #000; }
.set-gallery-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 26px auto 38px; font-size: .8rem; font-weight: 850; }
.set-gallery-legend span { display: flex; align-items: center; gap: 7px; }
.set-gallery-legend i { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--ink-border); border-radius: 5px; background: var(--white); font-style: normal; }
.set-gallery-legend .legend-missing { opacity: .35; }
.set-gallery-legend .legend-unknown { background: #25252d; color: white; }
.set-gallery { display: grid; gap: 46px; }
.set-rarity-group > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 4px solid var(--rarity-color); }
.set-rarity-group h2 { margin: 0; font-size: 1.8rem; }
.set-rarity-group > header span { font-weight: 850; }
.set-rarity-group.rarity-unique > header { border-image: linear-gradient(90deg, #17131f, #ff3cac 72%, #4deeea) 1; }
.set-rarity-group.rarity-mythical > header { border-image: linear-gradient(90deg, #1b080b, #d8243f 72%, #ee4939) 1; }
.set-rarity-group.rarity-celestial > header { border-image: linear-gradient(90deg, #35256d, #776de8 65%, #8edfff) 1; }
.set-rarity-group.rarity-gilded { --rarity-color: #d4a23a; }
.set-rarity-group.rarity-gilded > header { border-image: linear-gradient(90deg, #1a1204, #d4a23a 65%, #f3dc98) 1; }
.set-rarity-group.rarity-abyssal > header { border-image: linear-gradient(90deg, #031019, #0b5a70 65%, #3ff5d8) 1; }
.set-rarity-group.rarity-overgrown > header { border-image: linear-gradient(90deg, #0f230d, #3f8f2c 65%, #9be15d) 1; }
.set-rarity-group.rarity-inkbound > header { border-image: linear-gradient(90deg, #1d1b22, #6d6a73 70%, #c8102e) 1; }
.set-rarity-group.rarity-stormforged > header { border-image: linear-gradient(90deg, #0a1238, #2d63e8 60%, #7cc4ff 85%, #e2f3ff) 1; }
.set-rarity-group.rarity-blueprint > header { border-image: repeating-linear-gradient(90deg, #1f56a8 0 14px, #9fd0ff 14px 16px) 1; }
.set-rarity-group.rarity-glitched > header { border-image: linear-gradient(90deg, #ff2d55, #0d0d0f 20% 80%, #00e7ff) 1; }
.set-rarity-group > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); gap: 42px 30px; align-items: start; }
.set-gallery-card { display: flex; flex-direction: column; box-sizing: border-box; aspect-ratio: 4 / 7; overflow: hidden; position: relative; border: 2px solid var(--ink-border); border-radius: 11px; background: var(--white); box-shadow: 5px 5px 0 var(--rarity-color), 7px 7px 0 var(--ink-shadow); }
.set-gallery-card > .card-rarity { display: flex; align-items: center; justify-content: space-between; min-height: 30px; gap: 6px; padding: 0 11px; background: var(--rarity-color); color: #fff; font-size: 12px; font-weight: 750; }
.set-gallery-card > .card-rarity b { font: 600 12px ui-monospace, monospace; }
.set-gallery-card .set-gallery-card-body { flex: 1; display: flex; flex-direction: column; }
.set-gallery-card .set-card-unknown { flex: 1; aspect-ratio: auto; }
.set-gallery-card-body { transition: opacity .2s; }
.set-gallery-card.state-missing .set-gallery-card-body { opacity: .32; }
.set-gallery-card.state-failed { --rarity-color: #b21f3d; background: var(--tint-pink); }
.set-gallery-card.rarity-unique:not(.state-failed) { --rarity-color: #ff3cac; box-shadow: 7px 7px 0 #ff3cac, 10px 10px 0 #17131f, 0 0 24px rgba(77, 238, 234, .4); }
.set-gallery-card.rarity-mythical:not(.state-failed) { --rarity-color: #d8243f; box-shadow: 7px 7px 0 #d8243f, 10px 10px 0 #1b080b, 0 0 26px #e244386e; }
.set-gallery-card.rarity-celestial:not(.state-failed) { --rarity-color: #776de8; box-shadow: 7px 7px 0 #776de8, 10px 10px 0 #35256d, 0 0 28px #8edfff80; }
.set-gallery-card.rarity-gilded:not(.state-failed) { --rarity-color: #d4a23a; box-shadow: 7px 7px 0 #d4a23a, 10px 10px 0 #1a1204, 0 0 24px #f3dc9866; }
.set-gallery-card.rarity-abyssal:not(.state-failed) { --rarity-color: #0b5a70; box-shadow: 7px 7px 0 #0b5a70, 10px 10px 0 #031019, 0 0 26px #3ff5d855; }
.set-gallery-card.rarity-overgrown:not(.state-failed) { --rarity-color: #3f8f2c; box-shadow: 7px 7px 0 #3f8f2c, 10px 10px 0 #0f230d, 0 0 24px #9be15d55; }
.set-gallery-card.rarity-inkbound:not(.state-failed) { --rarity-color: #1d1b22; box-shadow: 7px 7px 0 var(--ink-shadow), 10px 10px 0 #c8102e; }
.set-gallery-card.rarity-stormforged:not(.state-failed) { --rarity-color: #2d63e8; box-shadow: 7px 7px 0 #2d63e8, 10px 10px 0 #0a1238, 0 0 26px #7cc4ff55; }
.set-gallery-card.rarity-blueprint:not(.state-failed) { --rarity-color: #1f56a8; box-shadow: 7px 7px 0 #1f56a8, 10px 10px 0 #0b2a5c; }
.set-gallery-card.rarity-glitched:not(.state-failed) { --rarity-color: #0d0d0f; box-shadow: -2px 0 0 #ff2d55, 2px 0 0 #00e7ff, 7px 7px 0 #0d0d0f, 10px 10px 0 var(--ink-shadow); }
.set-gallery-card img, .set-card-unknown { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-bottom: 3px solid var(--ink-border); }
.set-gallery-card.full-card-image img { aspect-ratio: 3 / 4; object-fit: contain; border: 0; }
.set-gallery-card.full-card-image.state-missing .set-gallery-card-body { opacity: 1; }
.set-gallery-card.full-card-image.rarity-unique img { filter: drop-shadow(0 0 10px rgba(77, 238, 234, .7)) drop-shadow(7px 7px 0 #ff3cac); }
.set-gallery-card.full-card-image.rarity-mythical img { filter: drop-shadow(0 0 12px #e2443899) drop-shadow(7px 7px 0 #d8243f); }
.set-gallery-card.full-card-image.rarity-celestial img { filter: drop-shadow(0 0 13px #8edfffaa) drop-shadow(7px 7px 0 #776de8); }
.set-gallery-card.full-card-image.rarity-abyssal img { filter: drop-shadow(0 0 13px #3ff5d899) drop-shadow(7px 7px 0 #0b5a70); }
.set-gallery-card.full-card-image.rarity-overgrown img { filter: drop-shadow(0 0 12px #9be15d99) drop-shadow(7px 7px 0 #3f8f2c); }
.set-gallery-card.full-card-image.rarity-inkbound img { filter: drop-shadow(7px 7px 0 #1d1b22); }
.set-gallery-card.full-card-image.rarity-stormforged img { filter: drop-shadow(0 0 12px #7cc4ff99) drop-shadow(7px 7px 0 #2d63e8); }
.set-gallery-card.full-card-image.rarity-blueprint img { filter: drop-shadow(7px 7px 0 #0b2a5c); }
.set-gallery-card.full-card-image.rarity-glitched img { filter: drop-shadow(-2px 0 0 #ff2d55) drop-shadow(2px 0 0 #00e7ff) drop-shadow(7px 7px 0 #0d0d0f); }
.set-gallery-card.full-card-image.state-missing img { opacity: .32; filter: grayscale(1); }
.set-card-unknown { display: grid; place-items: center; background: #25252d; color: white; font-size: 4rem; font-weight: 1000; }
.set-gallery-card h3 { margin: 12px 12px 4px; font-size: 1rem; }
.set-gallery-card p { margin: 0 12px 14px; font-size: .75rem; font-weight: 700; opacity: .7; }
@media (max-width: 560px) {
    .set-gallery-card h3 { font-size: .8rem; }
}
.set-gallery-item { min-width: 0; width: 100%; max-width: 340px; justify-self: center; display: grid; align-content: start; gap: 12px; }
.set-gallery-item > .card-preview-button { width: 100%; color: inherit; text-decoration: none; }
.set-card-owner { margin: 0; font-size: .85rem; font-weight: 750; text-align: center; overflow-wrap: anywhere; }
.set-card-owner a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.set-card-owner a:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.set-gallery-item .trading-card { width: 100%; }
.set-gallery-item.state-missing .card-art { opacity: .32; }
.set-sale-link, .set-bid-link { display: block; padding: 10px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--pastel-blue); color: var(--text-dark); font-weight: 850; text-align: center; }
.set-bid-link { background: var(--white); }
.set-sale-link:focus-visible, .set-bid-link:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }

.set-wishlist-toggle { display: inline-block; padding: 8px 14px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--white); font: inherit; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--ink-shadow); }
.set-wishlist-toggle[aria-pressed="true"] { background: var(--pastel-peach); }
.set-wishlist-toggle:disabled { cursor: progress; opacity: .6; }
[data-notable-card-actions] .card-holders { margin-top: 12px; }

.set-audience-visibility { display: grid; gap: 4px; margin: 0 0 12px; }
.set-audience-visibility legend { font-weight: 700; }
.set-audience-visibility[hidden] { display: none; }
.set-gallery-shared { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-peach); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.set-audience[hidden], .set-audience [hidden] { display: none; }
.set-audience { max-width: 720px; margin: 0 auto 32px; padding: 18px 20px; border: 3px solid var(--ink-border); border-radius: 12px; background: var(--white); box-shadow: 5px 5px 0 var(--ink-shadow); }
.set-audience > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.set-audience h2 { margin: 0; font-size: 1.3rem; }
.set-audience > p { margin: 8px 0 16px; font-weight: 650; }
.set-audience-add label { display: block; margin-bottom: 6px; font-weight: 850; }
.set-audience-add > div { display: flex; flex-wrap: wrap; gap: 8px; }
.set-audience-add .picker { flex: 1 1 220px; }
.set-audience-add input { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border: 2px solid var(--ink-border); border-radius: 7px; font: inherit; }
.set-audience-add input:focus-visible, .set-audience button:focus-visible, .set-audience a:focus-visible { outline: 3px solid #7543c5; outline-offset: 3px; }
.set-audience-guests { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.set-audience-guests li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 8px; font-weight: 750; overflow-wrap: anywhere; }
.set-audience-guests a { color: inherit; }
.set-audience-hint { margin: 6px 0 0; font-size: .9rem; font-weight: 650; color: var(--text-muted); }
.set-audience-crews li small { margin-left: 8px; font-weight: 650; color: var(--text-muted); }
.set-audience-guests .set-audience-empty { justify-content: center; border-style: dashed; font-weight: 650; }
.set-follow-toggle { display: inline-flex; align-items: center; min-height: 44px; margin: 4px auto 0; padding: 8px 16px; border: 3px solid var(--ink-border); border-radius: 8px; background: var(--white); color: var(--text-dark); font: inherit; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--ink-shadow); }
.set-follow-toggle[aria-pressed="true"] { background: var(--pastel-yellow); }
.set-follow-toggle[hidden] { display: none; }
.set-follow-toggle:disabled { cursor: progress; opacity: .6; }
.set-follow-toggle:focus-visible { outline: 3px solid #7543c5; outline-offset: 4px; }
/* Who sees the set and why (#1090): one row a person, their reasons beside them, coming in one after another. */
.set-audience-check { margin: -6px 0 16px; }
.set-viewers-dialog { width: min(560px, calc(100vw - 32px)); }
.set-viewers-note { margin: 0 0 12px; font-weight: 650; color: var(--text-muted); }
.set-viewers { display: grid; gap: 8px; max-height: min(60vh, 520px); margin: 0; padding: 0 4px 4px 0; overflow-y: auto; list-style: none; }
.set-viewers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 8px; font-weight: 750; overflow-wrap: anywhere; animation: set-viewer-in .3s ease-out both; animation-delay: calc(var(--row, 0) * 35ms); }
.set-viewer-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.set-viewer-reason { padding: 2px 9px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--tint-blue); font-size: .8rem; font-weight: 750; }
@keyframes set-viewer-in { from { opacity: 0; transform: translateY(6px); } }
html.motion-reduced .set-viewers li { animation: none; }
.set-audience-host { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 750; white-space: nowrap; }