.sets-page { max-width: 1200px; margin: 0 auto 60px; padding: 24px; color: var(--text-dark); }
/* The hero: the pitch on the left, and on the right the newest sets' sealed packs bobbing in a shop window. */
.sets-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; margin-bottom: 40px; }
.sets-hero-text { max-width: 620px; }
.sets-hero-text > span { display: inline-block; padding: 6px 12px; background: #25252d; color: white; font-weight: 900; letter-spacing: .12em; transform: rotate(-2deg); }
.sets-hero h1 { margin: 22px 0 16px; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1; }
.sets-hero p { line-height: 1.6; }
.sets-hero-window { display: flex; align-items: flex-end; justify-content: center; padding: 26px 30px 24px; border: 3px solid var(--ink-border); border-radius: 18px; background: var(--pastel-blue, #a8c8ec) radial-gradient(circle, #25252d26 1.2px, transparent 1.8px) 0 0 / 16px 16px; box-shadow: 8px 8px 0 var(--ink-shadow); }
.sets-hero-window .set-pack { --lift: 0px; translate: 0 var(--lift); transition: translate .22s cubic-bezier(.2, .8, .2, 1); }
.sets-hero-window .booster-pack { --pack-width: 94px; margin: 0 -14px; filter: drop-shadow(3px 3px 0 #25252d55); }
.sets-hero-window .set-pack:nth-child(1) { --lift: 10px; } .sets-hero-window .set-pack:nth-child(1) .booster-pack { --pack-tilt: -14deg; --pack-delay: 0s; }
.sets-hero-window .set-pack:nth-child(2) { --lift: 2px; z-index: 1; } .sets-hero-window .set-pack:nth-child(2) .booster-pack { --pack-tilt: -7deg; --pack-delay: .5s; }
.sets-hero-window .set-pack:nth-child(3) { --lift: -6px; z-index: 2; } .sets-hero-window .set-pack:nth-child(3) .booster-pack { --pack-delay: 1s; }
.sets-hero-window .set-pack:nth-child(4) { --lift: 2px; z-index: 1; } .sets-hero-window .set-pack:nth-child(4) .booster-pack { --pack-tilt: 7deg; --pack-delay: 1.5s; }
.sets-hero-window .set-pack:nth-child(5) { --lift: 10px; } .sets-hero-window .set-pack:nth-child(5) .booster-pack { --pack-tilt: 14deg; --pack-delay: 2s; }
.sets-hero-window:hover .set-pack { translate: 0 calc(var(--lift) - 8px); }
/* A pack holder: set-packs.js draws the wrapper inside it from the look the page carries. The tilt goes on the
   wrapper itself, never on the holder: a property that names itself resolves to nothing. */
.set-pack { display: block; }
.sets-wish { margin-top: 8px; padding: 12px 20px; border: 3px solid var(--ink-border); border-radius: 10px; background: var(--pastel-yellow); color: var(--text-dark); font: inherit; font-weight: 900; box-shadow: 4px 4px 0 var(--ink-shadow); cursor: pointer; }
.sets-wish:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink-shadow); }
.sets-wish:focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
.sets-wish:disabled { opacity: .6; cursor: progress; }
/* The rules offered to a collector who wants to make a set, and their three answers. */
.sets-wish-dialog { width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 24px; border: 3px solid var(--ink-border); border-radius: 14px; background: var(--white); color: var(--text-dark); box-shadow: 8px 8px 0 var(--ink-shadow); }
.sets-wish-dialog::backdrop { background: #25252d99; }
.sets-wish-dialog h2 { margin: 0 0 8px; }
.sets-wish-rules { display: grid; gap: 6px; margin: 14px 0; padding: 0; list-style: none; }
.sets-wish-rules li { padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--white); }
.sets-wish-rules strong { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.sets-wish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sets-wish-actions button { padding: 10px 16px; border: 3px solid var(--ink-border); border-radius: 10px; background: var(--pastel-yellow); color: var(--text-dark); font: inherit; font-weight: 900; cursor: pointer; }
.sets-wish-actions button.secondary { background: var(--white); }
.sets-wish-actions button:disabled { opacity: .6; cursor: progress; }
.sets-wish-other { display: grid; gap: 6px; }
.sets-wish-other[hidden], .sets-wish-actions[hidden] { display: none; }
.sets-wish-other label { font-weight: 800; }
.sets-wish-other textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 2px solid var(--ink-border); border-radius: 8px; font: inherit; resize: vertical; }
.sets-wish-status { min-height: 1.2em; margin: 10px 0 0; font-weight: 700; }
.sets-sign-in a { color: inherit; font-weight: 800; }
.sets-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 14px 18px; border: 2px solid var(--ink-border); border-radius: 10px; background: var(--white); }
.sets-show { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sets-show legend { float: left; margin-right: 16px; padding: 0; font-weight: 900; }
.sets-show label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.sets-show input { width: 16px; height: 16px; margin: 0; accent-color: #8854d0; }
.sets-show label:has(input:disabled) { opacity: .5; cursor: default; }
.sets-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; font-weight: 900; white-space: nowrap; }
.sets-sort select { max-width: 100%; padding: 7px 10px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--white); color: inherit; font: inherit; font-size: .85rem; }
.sets-search { box-sizing: border-box; width: 200px; min-height: 40px; padding: 7px 14px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); color: inherit; font: inherit; font-size: .85rem; font-weight: 700; }
.sets-search::placeholder { color: var(--text-muted); }
.sets-controls :is(input, select):focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
/* Turns every set over to its ? copies, and back, as a binder does. */
.sets-glitch-toggle { min-height: 36px; padding: 6px 12px; 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; }
.sets-glitch-toggle[aria-pressed="true"] { background: var(--white); color: var(--text-dark); }
.sets-glitch-toggle:focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
.sets-visible-count { margin: 10px 0 24px; color: var(--text-muted); font-size: .8rem; }
.sets-page [hidden] { display: none !important; }
.sets-category:not([hidden]) ~ .sets-category:not([hidden]) { margin-top: 44px; padding-top: 28px; border-top: 2px dashed #aaa5b2; }
.sets-category-heading { margin-bottom: 22px; }
.sets-category-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.6rem; }
.sets-category-heading h2 span { padding: 3px 8px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-purple-light); font-size: .8rem; }
.sets-category-heading p { max-width: 650px; margin: 10px 0 0; color: var(--text-muted); line-height: 1.6; }
.sets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; }
/* A set's card: a stage, its discovered cards fanned behind its sealed pack, over its name and its meters. */
.set-summary { min-width: 0; display: flex; flex-direction: column; border: 3px solid var(--ink-border); border-radius: 14px; background: var(--white); box-shadow: 6px 6px 0 var(--ink-shadow); overflow: hidden; transition: translate .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s cubic-bezier(.2, .8, .2, 1); }
.set-summary:hover { translate: -3px -3px; box-shadow: 9px 9px 0 var(--ink-shadow); }
.set-summary-stage { position: relative; display: block; height: 220px; overflow: hidden; border-bottom: 3px solid var(--ink-border); background: var(--pastel-purple-light, var(--pastel-purple-light)) radial-gradient(circle, #25252d1f 1.2px, transparent 1.8px) 0 0 / 14px 14px; }
.set-summary-fan { position: absolute; inset: 0; }
.set-summary-fan img { position: absolute; left: 42%; bottom: -16%; width: 44%; aspect-ratio: 5 / 7; object-fit: cover; border: 2px solid var(--ink-border); border-radius: 9px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); transform-origin: 50% 115%; transform: translate(-50%, var(--fan-lift, 0px)) rotate(var(--fan-turn, 0deg)); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.set-summary-fan img:nth-child(1) { --fan-turn: -20deg; }
.set-summary-fan img:nth-child(2) { --fan-turn: 0deg; z-index: 1; }
.set-summary-fan img:nth-child(3) { --fan-turn: 20deg; }
.set-summary:hover .set-summary-fan img:nth-child(1) { --fan-lift: -8px; }
.set-summary:hover .set-summary-fan img:nth-child(2) { --fan-lift: -14px; }
.set-summary:hover .set-summary-fan img:nth-child(3) { --fan-lift: -8px; }
.set-summary-stage .set-pack { position: absolute; right: 16px; bottom: -8px; z-index: 2; translate: 0 0; transition: translate .24s cubic-bezier(.2, .8, .2, 1); }
.set-summary-stage .booster-pack { --pack-width: 96px; --pack-tilt: 7deg; filter: drop-shadow(4px 4px 0 #25252d55); }
.set-summary:hover .set-summary-stage .set-pack { translate: 0 -10px; }
/* Nothing discovered yet: the pack alone, still sealed, in the middle of the stage. */
.set-summary-stage.is-sealed .set-pack { right: auto; bottom: auto; left: 50%; top: 50%; translate: -50% -50%; }
.set-summary-stage.is-sealed .booster-pack { --pack-width: 112px; --pack-tilt: -4deg; }
.set-summary:hover .set-summary-stage.is-sealed .set-pack { translate: -50% calc(-50% - 8px); }
.set-summary-stamp { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 4px 10px; border: 2px solid var(--ink-border); background: var(--pastel-yellow, var(--pastel-yellow)); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--ink-shadow); }
.set-summary-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.set-summary-size { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.set-summary-shared { margin-left: 8px; padding: 2px 8px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-peach, var(--pastel-peach)); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.set-summary h3 { margin: 8px 0 20px; font-size: 1.5rem; overflow-wrap: anywhere; }
.set-summary-part-of { margin: -14px 0 20px; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.set-summary-part-of a { color: inherit; }
.set-summary h3 a { color: inherit; text-decoration: none; }
.set-summary h3 a:hover { text-decoration: underline; }
.set-progress { margin-bottom: 22px; }
.set-progress > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .85rem; }
.set-progress progress { display: block; width: 100%; height: 14px; margin: 10px 0; border: 2px solid var(--ink-border); border-radius: 0; background: var(--muted-gray); accent-color: #8854d0; }
.set-progress progress::-webkit-progress-bar { background: var(--muted-gray); }
.set-progress progress::-webkit-progress-value { background: #8854d0; }
.set-progress progress::-moz-progress-bar { background: #8854d0; }
.set-progress-personal progress { accent-color: #168078; }
.set-progress-personal progress::-webkit-progress-value { background: #168078; }
.set-progress-personal progress::-moz-progress-bar { background: #168078; }
.set-progress p { margin: 0; font-size: .8rem; }
/* What collectors think of the set: its likes and dislikes, read-only here. */
.set-summary-votes { display: flex; gap: 8px; margin: auto 0 12px; padding-top: 16px; }
.set-summary-votes + .set-summary-link { margin-top: 0; }
.set-summary-vote { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--white); font: 850 .8rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.set-summary-vote svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-summary-vote.is-down svg { transform: rotate(180deg); }
.set-summary-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Turned over, every set shows its ? side in black and grey. */
.sets-page.is-glitched .set-summary { border-color: #000; background: #1a1a1e; color: #d6d6cc; box-shadow: 6px 6px 0 #000; }
.sets-page.is-glitched .set-summary-stage { border-color: #000; background: #2a2a30 radial-gradient(circle, #d6d6cc1a 1.2px, transparent 1.8px) 0 0 / 14px 14px; }
.sets-page.is-glitched :is(.set-summary-fan img, .set-pack .booster-pack, .set-summary-stamp) { filter: grayscale(1) contrast(1.1); }
.sets-page.is-glitched .set-summary-fan img { border-color: #000; box-shadow: 3px 3px 0 #000; }
.sets-page.is-glitched .set-summary-shared { border-color: #000; background: #3b3b42; color: #d6d6cc; }
.sets-page.is-glitched .set-progress progress { border-color: #000; background: #2a2a30; accent-color: #8a8a82; }
.sets-page.is-glitched .set-progress progress::-webkit-progress-bar { background: #2a2a30; }
.sets-page.is-glitched .set-progress progress::-webkit-progress-value { background: #8a8a82; }
.sets-page.is-glitched .set-progress progress::-moz-progress-bar { background: #8a8a82; }
.sets-page.is-glitched .set-summary-link { border-color: #000; background: #3b3b42; color: #d6d6cc; }
.set-summary-link { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 12px; border: 2px solid var(--ink-border); background: var(--pastel-blue); color: var(--text-dark); font-weight: 850; text-decoration: none; }
.sets-page a:focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
.sets-empty { padding: 32px; border: 3px dashed var(--ink-border); line-height: 1.6; }
.sets-pitch { max-width: 560px; margin-top: 48px; color: var(--text-muted); }
.sets-pitch summary { width: fit-content; font-size: .85rem; font-weight: 800; cursor: pointer; }
.sets-pitch summary:focus-visible { outline: 3px solid #8854d0; outline-offset: 4px; }
.sets-pitch-form, .sets-pitch-waiting { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 2px solid var(--ink-border); border-radius: 10px; background: var(--white); color: var(--text-dark); }
.sets-pitch-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 800; }
.saga-print-form p { margin: 0; font-size: .85rem; }
.saga-print-form input { width: 6em; }
/* A print sent off stamps the form once (#1057). */
.saga-print-form.is-printed { animation: saga-print-stamp 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saga-print-stamp { 0% { transform: scale(1); } 40% { transform: scale(.97) rotate(-.6deg); } 100% { transform: none; } }
.sets-pitch + .sets-pitch { margin-top: 16px; }
/* A saga's band over the sets it files (#1072, docs/sagas.md): its sets' packs on a shelf, its name, its size,
   its medal and its meters. */
.sets-shelves { display: grid; gap: 28px; }
.sets-saga-shelf { display: grid; gap: 24px; padding: 24px; border: 3px solid var(--ink-border); border-radius: 16px; background: var(--pastel-purple-light, var(--pastel-purple-light)); box-shadow: 6px 6px 0 var(--ink-shadow); }
.sets-saga-shelf.is-inner { padding: 18px; background: var(--pastel-yellow, var(--pastel-yellow)); box-shadow: 4px 4px 0 var(--ink-shadow); }
.sets-saga-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 16px 28px; }
.sets-saga-lineup { display: flex; align-items: flex-end; width: fit-content; max-width: 100%; padding: 12px 20px 0; border-bottom: 6px solid var(--ink-border); }
.sets-saga-lineup .set-pack { --lift: 0px; translate: 0 var(--lift); transition: translate .22s cubic-bezier(.2, .8, .2, 1); }
.sets-saga-lineup .booster-pack { --pack-width: 60px; margin: 0 -9px; filter: drop-shadow(2px 2px 0 #25252d55); }
.sets-saga-lineup .set-pack:nth-child(odd) .booster-pack { --pack-tilt: -6deg; }
.sets-saga-lineup .set-pack:nth-child(even) { --lift: -4px; z-index: 1; } .sets-saga-lineup .set-pack:nth-child(even) .booster-pack { --pack-tilt: 6deg; }
.sets-saga-shelf > .sets-saga-band:hover .sets-saga-lineup .set-pack { translate: 0 calc(var(--lift) - 6px); }
.sets-saga-more { align-self: center; margin: 0 0 12px 12px; padding: 3px 9px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); font-size: .78rem; font-weight: 900; }
.sets-saga-band-text { display: grid; gap: 12px; min-width: 0; }
.sets-saga-band-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sets-saga-band-title small { padding: 4px 9px; background: #25252d; color: white; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg); }
.sets-saga-band-title h3 { margin: 0; font-size: 1.6rem; overflow-wrap: anywhere; }
.sets-saga-band-title h3 a { color: inherit; text-decoration: none; }
.sets-saga-band-title h3 a:hover { text-decoration: underline; }
.sets-saga-count { padding: 3px 8px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--white); font-size: .8rem; font-weight: 800; }
.sets-saga-edit { margin-left: auto; padding: 4px 10px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--white); color: inherit; font-size: .8rem; font-weight: 800; text-decoration: none; }
.sets-saga-description { max-width: 650px; margin: 0; color: var(--text-muted); line-height: 1.6; }
/* The medal is the milestone the collector has reached over every set below the saga, in that tier's metal. */
.sets-saga-medal { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(135deg, var(--shine), var(--metal)); color: var(--edge); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sets-saga-medal i { width: 12px; height: 12px; border: 2px solid var(--edge); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--shine), var(--metal)); }
.sets-saga-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 28px; }
.sets-saga-meters .set-progress { margin-bottom: 0; }
.sets-saga-shelf .sets-grid { gap: 22px; }
.sets-loose-heading { margin: 8px 0 -6px; color: var(--text-muted); font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* Every saga on the page, in one line under the filters, each a door to its page. */
.sets-saga-index { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.sets-saga-index > span { font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sets-saga-index a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-purple-light); color: var(--text-dark); font-size: .85rem; font-weight: 800; text-decoration: none; box-shadow: 2px 2px 0 var(--ink-shadow); }
.sets-saga-index a:hover { background: var(--pastel-yellow); }
.sets-saga-index a small { padding: 0 6px; border-radius: 999px; background: #25252d; color: white; font-size: .72rem; }
/* The admin's form: a saga's name, its description, and the sets and sagas it holds picked as chips. */
.sets-saga-hint { margin: 10px 0 0; line-height: 1.5; }
.sets-saga-form { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 2px solid var(--ink-border); border-radius: 10px; background: var(--white); color: var(--text-dark); }
.sets-saga-form > label, .sets-saga-pick { display: grid; gap: 6px; font-size: .85rem; font-weight: 800; }
.sets-saga-form :is(input, textarea) { min-width: 0; padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 6px; font: inherit; font-weight: 400; }
.sets-saga-form .picker { font-weight: 400; }
.sets-saga-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sets-saga-actions button { padding: 8px 14px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-yellow); color: var(--text-dark); font: inherit; font-weight: 850; cursor: pointer; }
.sets-saga-actions button.secondary { background: var(--white); }
.sets-saga-actions button:disabled { opacity: .6; cursor: default; }
.sets-saga-form :is(input, textarea, button):focus-visible { outline: 3px solid #8854d0; outline-offset: 2px; }
/* A saga's own page: its packs on their shelf over its name, then its sets, then the sagas inside it. */
.saga-hero { max-width: 900px; margin: 0 auto 36px; text-align: center; }
.saga-back { margin-bottom: 18px; }
.saga-hero .sets-saga-lineup { margin: 0 auto 22px; padding: 16px 28px 0; }
.saga-hero .sets-saga-lineup .booster-pack { --pack-width: 92px; margin: 0 -13px; filter: drop-shadow(4px 4px 0 #25252d55); }
.saga-hero:hover .sets-saga-lineup .set-pack { translate: 0 calc(var(--lift) - 8px); }
.saga-hero-tag { display: inline-block; padding: 5px 10px; background: #25252d; color: white; font-weight: 900; letter-spacing: .12em; transform: rotate(-2deg); }
.saga-hero h1 { margin: 18px 0 8px; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .95; overflow-wrap: anywhere; }
.saga-description { max-width: 640px; margin: 0 auto; line-height: 1.6; }
.saga-parents { margin: 10px 0 0; color: var(--text-muted); font-size: .9rem; font-weight: 800; }
.saga-parents a { color: inherit; }
.saga-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.saga-stats > span:not(.sets-saga-medal) { padding: 8px 12px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); }
.saga-stats b { padding: 0 4px; background: var(--pastel-blue, #a8c8ec); }
.saga-hero .sets-saga-meters { max-width: 640px; margin: 24px auto 0; text-align: left; }
.saga-page .saga-sets + .saga-inner { margin-top: 44px; }
/* Smaller screens: the window under the pitch, the band's shelf over its text. */
@media (max-width: 820px) { .sets-hero { grid-template-columns: 1fr; } .sets-hero-window { justify-self: start; padding: 20px 22px 18px; } .sets-hero-window .booster-pack { --pack-width: 72px; margin: 0 -11px; } .sets-saga-band { grid-template-columns: 1fr; } }
/* Without motion, the packs stand still and the cards stay where they are. */
.motion-reduced .sets-page .booster-pack.is-lively, .motion-reduced .sets-page .booster-pack.is-lively :is(.booster-pack-sheen, .booster-pack-sticker) { animation: none; }
.motion-reduced .sets-page :is(.set-summary, .set-pack, .set-summary-fan img) { transition: none; }
.sets-pitch-form :is(input, select) { min-width: 0; padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 6px; font: inherit; font-weight: 400; }
.sets-pitch-waiting p { margin: 0; line-height: 1.5; }
.sets-pitch button { justify-self: start; padding: 8px 14px; border: 2px solid var(--ink-border); border-radius: 6px; background: var(--pastel-blue); color: var(--text-dark); font: inherit; font-weight: 850; cursor: pointer; }
.sets-pitch button:disabled { opacity: .6; cursor: default; }
.sets-pitch :is(input, select, button):focus-visible { outline: 3px solid #8854d0; outline-offset: 2px; }
@media (max-width: 560px) { .sets-page { padding: 16px 18px 18px; } .set-summary { padding: 20px; } .sets-sort, .sets-search { width: 100%; margin-left: 0; } .sets-sort select { flex: 1; min-width: 0; } }

/* Whether the sets outside the circle show at all (#998): a switch, the profile's, next to the filters. */
.sets-public { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; }
.sets-fold > summary { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 14px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); font-size: .85rem; font-weight: 800; cursor: pointer; list-style: none; }
.sets-fold > summary::-webkit-details-marker { display: none; }
.sets-fold > summary::before { content: '▸'; }
.sets-fold[open] > summary::before { content: '▾'; }
.sets-category-circle .sets-category-heading h2::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 3px solid #8854d0; border-radius: 50%; }