/* The pack designer: the wrapper and a card back on one side, the choices on the other. */
.pack-designer { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 24px; align-items: start; color: var(--text-dark); }
.pack-designer .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pack-designer-stage { position: sticky; top: calc(var(--shell-pad-top) + 20px); display: grid; justify-items: center; gap: 14px; padding: 18px 12px; border: 2px solid var(--ink-border); border-radius: 14px; background: repeating-conic-gradient(var(--tint-yellow) 0 10deg, var(--white) 10deg 20deg); }
.pack-designer-previews { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; }
/* Big and straight, so what is on it is easy to pick up and place. */
.pack-designer-pack .booster-pack { --pack-width: min(240px, 58vw); }
/* A binder's cover (collection-binder.css) stands on the stage the same way: still, its label and stickers to be moved. */
.pack-designer.is-cover .pack-designer-pack .binder-cover { width: min(250px, 60vw); cursor: default; }
.pack-designer.is-cover .pack-designer-pack .binder-cover:hover { transform: none; box-shadow: 4px 4px 0 var(--ink-shadow); }
.pack-designer.is-cover .binder-cover-art { pointer-events: auto; }
.pack-designer.is-cover .binder-cover-art .booster-pack-art { cursor: grab; touch-action: none; }
.pack-designer.is-cover .pack-designer-back { display: none; }
.pack-designer-text[hidden] { display: none; }
.pack-designer-back .card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: auto; aspect-ratio: 4 / 7; margin: 0; padding: 0; border: 3px solid var(--ink-border); border-radius: 9px; box-shadow: 3px 3px 0 var(--ink-shadow); box-sizing: border-box; transform: rotate(4deg); animation: none; }
.pack-designer-back .card-back small { display: none; }
/* Designing the backs, a card back is the big one and the pack stands beside it. */
.pack-designer-pack .card-back { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(220px, 55vw); height: auto; aspect-ratio: 4 / 7; margin: 0; padding: 0; border: 4px solid var(--ink-border); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink-shadow); box-sizing: border-box; animation: none; }
.pack-designer-pack .card-back small { display: none; }
.pack-designer-back .booster-pack { --pack-width: 84px; --pack-tilt: 4deg; }
.pack-designer-sides[hidden] { display: none; }
.pack-designer-sides { display: inline-flex; padding: 3px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: 2px 2px 0 var(--ink-shadow); }
.pack-designer .pack-designer-sides button { min-width: 0; min-height: 0; margin: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--text-dark); font: inherit; font-size: .8rem; font-weight: 900; transform: none; cursor: pointer; }
.pack-designer .pack-designer-sides button[aria-pressed="true"] { background: #25252d; color: #fff; }
.pack-designer-sides button:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 2px; }
.pack-designer-pack { border-radius: 8px; }
.pack-designer-pack:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 6px; }
.pack-designer-pack [data-pack-piece] { cursor: grab; touch-action: none; }
.pack-designer-pack :is(.booster-pack, .card-back).has-art { cursor: grab; touch-action: none; }
.pack-designer-pack [data-pack-piece].is-selected { outline: 2px dashed var(--text-dark); outline-offset: 3px; }
.pack-designer-pack .is-moving-piece [data-pack-piece].is-selected { cursor: grabbing; }
.pack-designer-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-size: .75rem; font-weight: 800; }
.pack-designer-tools label { display: inline-flex; align-items: center; gap: 6px; }
.pack-designer-tools label[hidden], .pack-designer-tools button[hidden], .pack-designer-tools[hidden] { display: none; }
.pack-designer-tools select { max-width: 170px; padding: 4px 6px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--white); font: inherit; }
.pack-designer-tools input[type="range"] { width: 90px; accent-color: #ff5d8f; }
.pack-designer-tools [data-tool="angle"]:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }
.pack-designer-tools small { flex-basis: 100%; text-align: center; font-weight: 650; opacity: .75; }
/* The ↻ handle is the one a fridge magnet has, sized for the smaller pack. */
.pack-designer-pack .booster-pack-decal > .placement-rotate { --placement-scale: 1.25; }
.pack-designer .pack-designer-tools button { padding: 4px 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink-shadow); font-size: .75rem; }
.pack-designer .pack-designer-roll { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 3px solid var(--ink-border); border-radius: 999px; background: var(--pastel-yellow); box-shadow: 3px 3px 0 var(--ink-shadow); color: var(--text-dark); font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; }
.pack-designer-roll:hover { transform: translateY(-1px) rotate(-2deg); }
.pack-designer-roll:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-shadow); }
.pack-designer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.pack-designer .pack-designer-same { padding: 7px 14px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink-shadow); font-size: .8rem; }
.pack-designer .pack-designer-same[hidden] { display: none; }
.pack-designer-note { margin: 0; color: var(--text-muted); font-size: .7rem; text-align: center; }
.pack-designer-controls { display: grid; gap: 14px; min-width: 0; }
.pack-designer fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pack-designer legend { margin-bottom: 7px; padding: 0; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pack-designer-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.pack-designer-choice { position: relative; display: block; cursor: pointer; }
.pack-designer-choice input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.pack-designer-face { position: relative; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 2px solid var(--ink-border); border-radius: 9px; background: var(--white); box-sizing: border-box; }
.pack-designer-choice input:checked + .pack-designer-face { outline: 3px solid var(--text-dark); outline-offset: 2px; box-shadow: 0 0 0 5px #ffe76b; }
.pack-designer-choice input:focus-visible + .pack-designer-face { outline: 3px solid #ff5d8f; outline-offset: 3px; }
/* A sticker to add is a button with the same face as an option. */
.pack-designer button.pack-designer-choice { display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: none; }
.pack-designer button.pack-designer-choice:hover .pack-designer-face { transform: translateY(-1px) rotate(-4deg); }
.pack-designer button.pack-designer-choice:focus-visible { outline: none; }
.pack-designer button.pack-designer-choice:focus-visible .pack-designer-face { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.pack-designer button.pack-designer-choice:disabled { opacity: .4; cursor: not-allowed; }
.pack-designer-uploads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pack-designer-upload { position: relative; display: inline-block; padding: 7px 12px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--pastel-yellow); box-shadow: 2px 2px 0 var(--ink-shadow); font-size: .8rem; font-weight: 900; cursor: pointer; }
.pack-designer-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pack-designer-upload:focus-within { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.pack-designer-upload:has(input:disabled) { opacity: .5; cursor: progress; }
.pack-designer .pack-designer-remove { padding: 6px 12px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink-shadow); font-size: .8rem; }
.pack-designer :is(.pack-designer-upload, .pack-designer-remove)[hidden] { display: none; }
.pack-designer-text { display: grid; gap: 6px; max-width: 360px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pack-designer-text input { padding: 8px 10px; border: 2px solid var(--ink-border); border-radius: 8px; font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.pack-designer-sign { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 800; cursor: pointer; }
.pack-designer-sign[hidden] { display: none; }
/* A patch of the print at the size it has on a pack, shrunk into the swatch. */
.pack-designer-swatch { position: absolute; left: 50%; top: 50%; display: block; width: 110px; height: 110px; container-type: inline-size; transform: translate(-50%, -50%) scale(.4); }
.pack-designer-emblem { display: grid; place-items: center; width: 100%; height: 100%; background: var(--tint-yellow); }
.pack-designer-emblem-icon { width: 30px; height: 30px; overflow: visible; fill: var(--pack-c); fill-rule: evenodd; stroke: var(--text-dark); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; }
.pack-designer-none { width: 22px; height: 22px; border: 3px solid #b7adbd; border-radius: 50%; background: linear-gradient(45deg, transparent 44%, #b7adbd 44% 56%, transparent 56%); box-sizing: border-box; }
.pack-designer-letters { font-size: 1.15rem; line-height: 1; }
.pack-designer-palettes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pack-designer .pack-designer-palette { display: flex; gap: 0; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--white); box-shadow: none; transform: none; cursor: pointer; }
.pack-designer-palette i { width: 16px; height: 22px; }
.pack-designer .pack-designer-palette[aria-pressed="true"] { box-shadow: 0 0 0 3px #ffe76b, 0 0 0 5px var(--ink-shadow); }
.pack-designer-palette:focus-visible { outline: 3px solid #ff5d8f; outline-offset: 3px; }
.pack-designer-colors { display: flex; flex-wrap: wrap; gap: 14px; }
.pack-designer-colors label { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 800; }
.pack-designer-colors input { width: 38px; height: 30px; padding: 2px; border: 2px solid var(--ink-border); border-radius: 7px; background: var(--white); cursor: pointer; }
@media (max-width: 640px) {
    .pack-designer { grid-template-columns: minmax(0, 1fr); }
    .pack-designer-stage { position: static; }
}
.motion-reduced .pack-designer-roll { transform: none; }