.upgrade-page[hidden], .pack-app [hidden] { display: none !important; }
body.pack-mode { background: #0d0f12; color: #f1f2f4; }
.pack-app { --pack-gold: #f3c65c; --pack-text: #f1f2f4; --pack-muted: #b2b7c2; --pack-quiet: #969eac; --pack-bg: #0d0f12; --pack-surface: #171a1f; --pack-raised: #20242b; --pack-hover: #292f38; --pack-line: #ffffff1c; --pack-radius: 11px; --pack-ease: cubic-bezier(.2,.7,.2,1); width: min(1160px, 100%); margin: auto; padding: 0 38px; font-size: 14px; line-height: 1.55; }
.pack-app h1, .pack-app h2, .pack-app p { margin: 0; }
.pack-app h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.035em; font-weight: 650; }
.pack-app h2 { font-size: 27px; line-height: 1.25; letter-spacing: -.035em; font-weight: 620; }
.pack-app :where(button, input, select) { font: inherit; }
.pack-app button { cursor: pointer; }
.pack-app select { cursor: pointer; }
.pack-app button:disabled { opacity: .5; cursor: default; }
.pack-app :focus-visible { outline: 2px solid var(--pack-gold); outline-offset: 5px; }
.pack-header { display: flex; align-items: center; justify-content: space-between; min-height: 94px; gap: 15px; }
.pack-brand { display: flex; align-items: center; gap: 11px; }
.pack-brand strong { font-size: 18px; letter-spacing: -.035em; font-weight: 650; }
.pack-brand span { display: block; color: var(--pack-muted); font-size: 12px; }
.pack-image { position: relative; display: grid; place-items: center; overflow: hidden; }
.pack-image img { width: 100%; display: block; object-fit: contain; position: relative; }
.pack-image-fallback { position: absolute; padding: 12px; text-align: center; color: var(--pack-muted); font-size: 13px; }
.pack-logo { width: 44px; height: 44px; border-radius: 50%; background: none; }
.pack-logo img { width: 38px; }
.pack-header-meta { display: flex; align-items: center; gap: 18px; }
.pack-test-badge { font-size: 12px; font-weight: 550; letter-spacing: .08em; color: #c9bb9d; border: 1px solid #f3c65c26; padding: 5px 10px; border-radius: 999px; }
.pack-tabs { display: flex; gap: 25px; border-bottom: 1px solid #ffffff12; margin-bottom: 34px; }
.pack-button { border: 1px solid #ffffff29; color: var(--pack-text); background: var(--pack-raised); min-height: 44px; padding: 10px 17px; border-radius: var(--pack-radius); font-weight: 550; transition: background-color .16s, color .16s, border-color .16s, box-shadow .16s, transform .18s var(--pack-ease); -webkit-tap-highlight-color: transparent; }
.pack-button:hover:not(:disabled) { background-color: var(--pack-hover); border-color: #ffffff50; }
.pack-tab { border: 0; border-bottom: 2px solid transparent; padding: 12px 0 17px; border-radius: 0; color: var(--pack-muted); background: none; font-size: 13px; white-space: nowrap; }
.pack-tab.active { border-color: var(--pack-gold); color: var(--pack-text); }
.pack-tab:hover:not(:disabled), .pack-text-button:hover:not(:disabled) { background: transparent; color: var(--pack-gold); }
.pack-player { margin-left: auto; align-self: center; font-size: 12px; color: var(--pack-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-heading { margin-bottom: 25px; }
.pack-kicker { color: var(--pack-muted); font-size: 12px; font-weight: 550; letter-spacing: .045em; display: block; }
.pack-heading .pack-kicker { margin-bottom: 10px; }
.pack-heading h1 + p { margin-top: 12px; }
.pack-muted { color: var(--pack-muted); }
.pack-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 24px 0 18px; }
.pack-catalog-search { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; }
.pack-catalog-search input, .pack-checklist-fields > input { min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #ffffff26; border-radius: 10px; background: var(--pack-raised); color: var(--pack-text); }
.pack-catalog-search input { flex: 1; width: 100%; }
.pack-catalog-search .pack-chip { white-space: nowrap; }
.pack-catalog-count { color: var(--pack-muted); font-size: 12px; white-space: nowrap; }
.pack-compact-label, .pack-selection-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pack-selection-label { margin-bottom: 6px; }
.pack-favorite { font-size: 24px; line-height: 1; padding: 6px; min-height: 36px; min-width: 36px; border-radius: 50%; }
.pack-favorite[aria-pressed="true"] { color: var(--pack-gold); }
.pack-chip { padding: 7px 14px; border-radius: 999px; font-size: 12px; background: none; border-color: #ffffff15; color: var(--pack-muted); }
.pack-chip.active { background: #f3c65c12; border-color: #f3c65c42; color: #edce8c; }
.pack-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 24px; }
.pack-tile { text-align: left; padding: 0 0 17px; min-width: 0; background: var(--pack-surface); border: 1px solid #ffffff12; border-radius: 10px; overflow: hidden; }
.pack-tile.selected { border-color: #f3c65c8c; background: #1c1917; box-shadow: inset 0 0 0 1px #f3c65c0c; }
.pack-tile:hover:not(:disabled) { background: var(--pack-hover); border-color: #ffffff38; }
.pack-tile.selected:hover:not(:disabled) { border-color: var(--pack-gold); }
.pack-tile > span, .pack-tile > strong { display: block; padding: 0 15px; }
.pack-tile-series { font-size: 12px; color: var(--pack-muted); margin-top: 12px; }
.pack-tile-name { font-size: 15px; font-weight: 600; margin: 3px 0; }
.pack-tile-meta { font-size: 12px; color: var(--pack-muted); }
.pack-wrapper-stage { height: 192px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 72%, #ffffff08, transparent 70%); overflow: hidden; }
/* Original product photographs are the wrapper artwork; missing artwork stays a plain label. */
.pack-cover { width: 94px; aspect-ratio: 780 / 1428; overflow: visible; transform: rotate(-3deg); filter: drop-shadow(5px 9px 7px #0008); transition: transform .28s var(--pack-ease); }
.pack-cover img { width: 100%; height: 100%; object-fit: contain; }
.pack-cover[data-has-art="false"] { min-height: 170px; border: 1px solid #ffffff20; border-radius: 4px; background: #242229; filter: none; }
.pack-cover .pack-image-fallback { font-size: 12px; line-height: 1.5; }
.pack-tile:nth-child(even) .pack-cover { transform: rotate(3deg); }
.pack-tile:hover:not(:disabled) .pack-cover, .pack-tile.selected .pack-cover { transform: rotate(0deg) translateY(-2px); }
.pack-selection-cover { width: 160px; flex: 0 0 160px; display: grid; place-items: center; }
.pack-selection-cover .pack-cover { width: 85px; }
.pack-selection { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--pack-surface); border: 1px solid #ffffff1c; border-radius: 12px; padding: 27px 30px; }
.pack-selection-copy > .pack-kicker { margin-bottom: 8px; }
.pack-selection-copy h2 { margin-bottom: 8px; }
.pack-pills { display: flex; flex-wrap: wrap; gap: 6px 15px; font-size: 12px; margin: 15px 0 22px; color: #b8b4b0; }
.pack-pills span::before { content: '·'; color: var(--pack-gold); margin-right: 6px; }
.pack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pack-primary { background: linear-gradient(180deg, #f5cd71, #efc15a); border-color: #f7d582; color: #281e0c; font-weight: 650; box-shadow: inset 0 1px 0 #fff4, 0 1px 2px #0004; }
.pack-primary:hover:not(:disabled) { background: linear-gradient(135deg, #fbe3a5, #f3c65c); border-color: #fce5af; box-shadow: inset 0 1px 0 #fff5, 0 2px 5px #0004; }
.pack-text-button { background: none; border-color: transparent; font-size: 12px; padding-inline: 6px; color: var(--pack-muted); }
.pack-small { font-size: 12px; padding: 7px 12px; }
/* Small, tactile feedback belongs to controls; the cards and binder own the big motion. */
.pack-button-arrow { display: inline-block; margin-left: 9px; transition: transform .2s var(--pack-ease); }
.pack-button:hover:not(:disabled) > .pack-button-arrow { transform: translateX(3px); }
.pack-button:active:not(:disabled, .pack-tab, .pack-tile, .pack-mini-card, .pack-history-row, .pack-binder-swatch) { transform: translateY(1px); }
.pack-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px #8b66152b; }
.pack-chase { display: flex; align-items: center; gap: 17px; max-width: 275px; }
.pack-chase .pack-image { min-width: 87px; width: 87px; height: 122px; transform: rotate(7deg); border-radius: 5px; background: #25232a; box-shadow: 3px 7px 12px #0006; }
.pack-chase strong { display: block; margin: 7px 0 4px; font-size: 14px; }
.pack-chase .pack-kicker { font-size: 12px; line-height: 1.7; }
.pack-chase .pack-muted { display: block; font-size: 12px; }
.pack-bottom-stats { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 20px 3px; color: var(--pack-muted); font-size: 12px; }
.pack-bottom-stats span:last-child { margin-left: auto; }
.pack-footer { padding: 26px 0; margin-top: 28px; border-top: 1px solid #ffffff0e; color: var(--pack-quiet); font-size: 12px; letter-spacing: .1em; text-align: center; }
.pack-notice, .pack-error, .pack-resume { padding: 13px 17px; border: 1px solid #ffffff16; background: #ffffff03; color: #c4bdac; border-radius: 8px; margin-bottom: 24px !important; font-size: 12px; }
.pack-error { border-color: #eaaa6c50; background: #a645160d; color: #f2c8a7; }
.pack-error button { margin-left: 12px; }
.pack-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack-busy-indicator { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; overflow: hidden; background: #f3c65c14; }
.pack-busy-indicator::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; background: var(--pack-gold); animation: pack-request-progress 1.2s ease-in-out infinite; }
@keyframes pack-request-progress { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) { .pack-busy-indicator::after { animation: none; width: 100%; opacity: .6; } }
.pack-progress { display: flex; gap: 6px; max-width: 420px; }
.pack-progress span { height: 3px; flex: 1; background: #ffffff20; border-radius: 3px; }
.pack-progress .seen { background: var(--pack-gold); }
.pack-reveal { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; padding: 25px 0 12px; }
/* Each large card has a separate reveal plane and user-controlled tilt plane. */
.pack-card-stage { min-height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; isolation: isolate; perspective: 1000px; background: radial-gradient(ellipse, #f3c65c09, transparent 65%); }
.pack-card-face { aspect-ratio: var(--card-aspect, 245 / 342); border-radius: 9px; background: linear-gradient(135deg, #323e30, #182116); box-shadow: 0 5px 20px #0005; isolation: isolate; }
.pack-card-face img { height: 100%; object-fit: contain; }
.pack-art-note { position: absolute; bottom: 12%; left: 5px; right: 5px; color: #aaa5ae; text-align: center; font-size: 12px; }
.pack-card-presentation { width: min(290px, 100%); position: relative; z-index: 2; perspective: 1000px; }
.pack-card-presentation[data-orientation="landscape"] { width: min(420px, calc(100% - 24px)); }
.pack-tilt-plane { --tilt-x: 0deg; --tilt-y: 0deg; width: 100%; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .18s ease-out; transform-style: preserve-3d; }
.pack-card-face.large { width: 100%; --light-x: 50%; --light-y: 50%; --foil-x: 50%; --foil-y: 50%; --foil-angle: 115deg; --foil-power: .09; }
.pack-card-face.large.is-hit { box-shadow: 0 0 30px #f3c65c14, 0 13px 25px #0009; }
.pack-card-face.is-interactive { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pack-card-face.is-dragging { cursor: grabbing; }
.pack-card-face.is-zoomable { cursor: zoom-in; }
.pack-card-face.is-zoomable:not(.is-interactive) { touch-action: manipulation; }
.pack-card-face.is-zoomable.is-dragging { cursor: grabbing; }
.pack-card-face:focus-visible { outline: 2px solid #f3c65c; outline-offset: 5px; }
.pack-tilt-hint { margin-top: 20px !important; font-size: 12px; color: #b8b2ac; text-align: center; }
.pack-foil-note { font-size: 12px; color: var(--pack-quiet); text-align: center; margin-top: 4px !important; }
.pack-card-presentation.is-arriving { animation: pack-card-arrive .45s cubic-bezier(.2,.7,.2,1) both; }
.pack-card-presentation.is-arriving:not([data-tier="ordinary"]) { animation: pack-hit-arrive 1.3s cubic-bezier(.17,.67,.22,1) both; }
.pack-card-presentation.is-arriving[data-tier="special"], .pack-card-presentation.is-arriving[data-tier="gold"] { animation-duration: 1.65s; }
.pack-hit-halo { position: absolute; z-index: -1; top: 0; width: 80%; max-width: 420px; height: 430px; border-radius: 50%; background: radial-gradient(ellipse, #f3c65c40, #f3c65c15 35%, transparent 68%); pointer-events: none; animation: pack-halo-bloom 1.7s ease-out both; }
.pack-card-stage[data-tier="special"] .pack-hit-halo { background: radial-gradient(ellipse, #fff2a555, #c4cff724 32%, transparent 68%); animation-duration: 2s; }
.pack-card-stage[data-tier="gold"] .pack-hit-halo { background: radial-gradient(ellipse, #ffeb9970, #b5822733 38%, transparent 68%); animation-duration: 2s; }
.pack-hit-burst { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.pack-hit-burst i { --spark-delay: 0ms; position: absolute; left: 50%; top: 42%; width: 4px; height: 4px; background: #ffeda4; box-shadow: 0 0 8px #f3c65c80; border-radius: 1px; animation: pack-spark 1.6s ease-out both; animation-delay: calc(.35s + var(--spark-delay)); }
.pack-card-stage[data-tier="special"] .pack-hit-burst i, .pack-card-stage[data-tier="gold"] .pack-hit-burst i { animation-delay: calc(.55s + var(--spark-delay)); }
.pack-card-stage[data-tier="hit"] .pack-hit-burst i:nth-child(even) { display: none; }
.pack-hit-caption { position: absolute; top: -6px; z-index: 4; font-size: 12px; letter-spacing: .2em; font-weight: 700; color: #fff0ac; pointer-events: none; animation: pack-hit-title 2s ease-out both; }
.pack-reveal-details.is-hit-reveal { animation: pack-details-reveal 1.3s ease-out both; }
.pack-reveal-details .pack-kicker { margin-bottom: 12px; }
.pack-reveal-details h2 { font-size: 35px; margin-bottom: 6px; }
.pack-finish { display: inline-block; color: #bcb7c1; font-size: 12px; padding: 4px 10px; margin-top: 16px; border: 1px solid #ffffff25; border-radius: 5px; }
.pack-card-value { display: block; font-size: 24px; font-weight: 550; letter-spacing: -.025em; margin-top: 20px; }
.pack-price-note { color: var(--pack-quiet); font-size: 12px; margin: 6px 0 25px !important; }
.pack-special { font-size: 18px; font-weight: 700; color: var(--pack-gold); margin-bottom: 24px !important; }
.pack-reveal-tray { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 20px 0; }
.pack-reveal-tray .pack-card-face { width: 52px; }
.pack-reveal-tray .pack-image-fallback { font-size: 7px; padding: 4px; }
.pack-reveal-tray .pack-art-note { display: none; }
.pack-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; margin: 25px 0; }
.pack-mini-card { position: relative; min-width: 0; text-align: left; padding: 0; background: none; border: none; border-radius: 7px; }
.pack-mini-card:hover:not(:disabled) { transform: translateY(-2px); background: transparent; }
.pack-mini-art { width: 100%; aspect-ratio: 245 / 342; display: flex; align-items: center; margin-bottom: 10px; }
.pack-mini-card .pack-card-face { width: 100%; }
.pack-mini-card > strong { display: block; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pack-mini-card > .pack-muted { display: block; font-size: 12px; margin-top: 2px; }
.pack-mini-value { display: block; font-size: 12px; color: #dfd9ae; margin-top: 4px; }
.pack-new-badge, .pack-copy-count { position: absolute; top: 7px; left: 7px; background: var(--pack-gold); color: #281e0c; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 750; box-shadow: 0 1px 5px #0005; }
.pack-copy-count { left: auto; right: 7px; }
.pack-summary-bottom { border-top: 1px solid #ffffff15; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.pack-total-value { font-size: 32px; color: var(--pack-gold); display: block; margin: 5px 0; }
.pack-summary-bottom .pack-muted { font-size: 12px; }
.pack-summary-bottom .pack-price-note { margin-bottom: 0 !important; }
.pack-empty { text-align: center; padding: 65px 15px; border: 1px dashed #f3c65c30; border-radius: 12px; }
.pack-empty > span { display: block; font-size: 45px; color: var(--pack-gold); margin-bottom: 15px; }
.pack-empty p { margin: 12px 0 25px; }
.pack-collection-controls { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; }
.pack-collection-controls form { display: flex; gap: 8px; max-width: 100%; }
.pack-collection-controls input, .pack-collection-controls select { min-width: 0; color: var(--pack-text); background: var(--pack-raised); border: 1px solid #ffffff20; padding: 10px 14px; border-radius: 7px; font-size: 12px; }
.pack-collection-controls input { width: 260px; }
.pack-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 24px 0; font-size: 12px; }
.pack-set-progress { display: flex; flex-wrap: wrap; gap: 9px 25px; color: var(--pack-muted); font-size: 12px; }
.pack-collection-value { color: #d6c8ac; margin-top: 28px !important; }
.pack-history { border-top: 1px solid #ffffff15; }
.pack-history-row { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; padding: 22px 16px; border: 0; border-bottom: 1px solid #ffffff15; border-radius: 0; background: none; gap: 20px; }
.pack-history-row div span { display: block; font-size: 12px; margin-top: 4px; }
.pack-history-row > span { color: var(--pack-gold); font-size: 12px; white-space: nowrap; }
.pack-odds-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.pack-odds-table th, .pack-odds-table td { padding: 15px; text-align: left; border-bottom: 1px solid #ffffff15; }
.pack-odds-table th { font-size: 12px; color: var(--pack-muted); font-weight: 500; }
.pack-odds-table td:last-child { color: var(--pack-gold); }
.pack-special-rate { margin: 20px 0 10px !important; color: var(--pack-gold); }
.pack-odds-table ~ .pack-muted { font-size: 12px; margin: 15px 0; max-width: 800px; }
.pack-odds-table ~ .pack-actions { margin-top: 25px; }
.packs-return { position: absolute; top: 20px; left: 20px; background: #211f26; border: 1px solid #f3c65c60; border-radius: 6px; color: #f3c65c; padding: 8px 12px; cursor: pointer; }
@keyframes pack-card-arrive { from { opacity: 0; transform: translateY(18px) rotateY(-18deg); } to { opacity: 1; transform: translateY(0) rotateY(0); } }
@keyframes pack-hit-arrive { 0%, 27% { opacity: 0; transform: scale(.8) rotateY(-75deg) translateY(15px); } 55% { opacity: 1; transform: scale(1.035) rotateY(7deg); } 100% { opacity: 1; transform: scale(1) rotateY(0); } }
@keyframes pack-halo-bloom { 0% { opacity: 0; transform: scale(.65); } 28% { opacity: .8; } 55% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes pack-spark { 0% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(75px) scale(.5); } 35% { opacity: .9; transform: rotate(var(--spark-angle)) translateX(calc(var(--spark-distance) * .85)) scale(1) rotate(30deg); } 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(.25) rotate(65deg); } }
@keyframes pack-details-reveal { 0%, 27% { opacity: 0; transform: translateY(6px); } 70%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pack-hit-title { 0%, 12% { opacity: 0; transform: translateY(6px); } 30%, 65% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-3px); } }
/* The two wrapper pieces share the same product photograph and separate at the crimp. */
.pack-unwrapping { min-height: 520px; text-align: center; border: 1px solid #f3c65c1c; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #f3c65c09, transparent 70%), var(--pack-surface); padding: 20px 20px 25px; overflow: hidden; }
.pack-tear-scene { position: relative; height: 450px; width: min(430px, 100%); margin: auto; perspective: 1000px; overflow: hidden; }
.pack-tear-wrapper { --tear-progress: 0; width: 208px; aspect-ratio: var(--wrapper-ratio, 780 / 1428); position: absolute; top: 25px; left: calc(50% - 104px); z-index: 2; transform: rotate(-4deg); filter: drop-shadow(15px 18px 14px #0009); }
.pack-wrapper-body, .pack-wrapper-cap { position: absolute; inset: 0; transition: transform .18s ease-out; }
.pack-tear-wrapper .pack-cover { width: 100%; height: 100%; aspect-ratio: auto; transform: none; filter: none; }
.pack-tear-wrapper .pack-cover img { object-fit: fill; }
.pack-wrapper-body { clip-path: polygon(0 5%, 8% 5.4%, 14% 4.8%, 23% 5.5%, 30% 4.7%, 38% 5.4%, 44% 4.8%, 55% 5.3%, 62% 4.7%, 71% 5.4%, 82% 4.8%, 92% 5.5%, 100% 5%, 100% 100%, 0 100%); transform: rotateY(calc(var(--tear-progress) * -6deg)); }
.pack-wrapper-cap { clip-path: polygon(0 0, 100% 0, 100% 5.5%, 92% 5.8%, 82% 5.2%, 71% 5.8%, 62% 5.1%, 55% 5.7%, 44% 5.2%, 38% 5.8%, 30% 5.1%, 23% 5.9%, 14% 5.2%, 8% 5.8%, 0 5.4%); transform-origin: 95% 5%; transform: translateX(calc(var(--tear-progress) * 15px)) translateY(calc(var(--tear-progress) * -12px)) rotate(calc(var(--tear-progress) * 6deg)); }
.pack-tear-handle { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 3px; left: -18px; right: -18px; z-index: 3; height: 46px; padding: 0 12px; border: 1px solid #f3c65c80; background: #13160ddb; color: #fff0b0; border-radius: 7px; font-size: 12px; font-weight: 700; letter-spacing: .14em; touch-action: pan-y; cursor: ew-resize !important; box-shadow: 0 5px 15px #0005; transition: opacity .2s; }
.pack-tear-handle span:first-child, .pack-tear-handle span:last-child { font-size: 16px; }
.pack-tear-handle:hover:not(:disabled) { background: #24271bef; }
.pack-seal-glow { position: absolute; top: 30px; left: 16%; width: 68%; height: 90px; background: radial-gradient(ellipse, #f3c65c33, transparent 70%); opacity: .55; pointer-events: none; }
.pack-sealed-stack { position: absolute; width: 186px; height: 260px; top: 115px; left: calc(50% - 93px); z-index: 1; transform: rotate(-4deg); }
.pack-card-back { --stack-index: 0; position: absolute; inset: 0; border-radius: 4.5%; background: #152e60; transform: translate(calc(var(--stack-index) * 2px), calc(var(--stack-index) * -2px)); box-shadow: 1px 2px 5px #0008; }
.pack-card-back img { width: 100%; height: 100%; object-fit: contain; }
.pack-tear-status { font-size: 12px; color: #b4adb9; min-height: 22px; margin-bottom: 16px !important; }
.pack-unwrapping > .pack-actions { justify-content: center; }
.pack-unwrapping[data-phase="tearing"] .pack-wrapper-cap { animation: pack-seal-tear .6s cubic-bezier(.25,.1,.3,1) both; }
.pack-unwrapping[data-phase="tearing"] .pack-tear-handle, .pack-unwrapping[data-phase="released"] .pack-tear-handle { opacity: 0; pointer-events: none; }
.pack-unwrapping[data-phase="tearing"] .pack-wrapper-body { animation: pack-wrapper-crinkle .55s ease both; }
.pack-unwrapping[data-phase="released"] .pack-wrapper-cap { opacity: 0; }
.pack-unwrapping[data-phase="released"] .pack-tear-wrapper { animation: pack-wrapper-away .9s cubic-bezier(.32,.08,.27,1) both; }
.pack-unwrapping[data-phase="released"] .pack-sealed-stack { animation: pack-stack-out 1s cubic-bezier(.2,.7,.3,1) both; }
.pack-unwrapping[data-phase="released"] .pack-seal-glow { animation: pack-halo-bloom 1s ease both; }
@keyframes pack-seal-tear { 0% { transform: translateX(12px) translateY(-8px) rotate(4deg); } 35% { transform: translateX(28px) translateY(-17px) rotate(12deg) rotateY(18deg); opacity: 1; } 100% { transform: translateX(95px) translateY(-95px) rotate(30deg) rotateY(35deg); opacity: 0; } }
@keyframes pack-wrapper-crinkle { 0%, 100% { transform: rotateY(-5deg); } 40% { transform: rotateY(9deg) skewY(-1deg) scaleX(.98); } }
@keyframes pack-wrapper-away { 0% { transform: rotate(-4deg); opacity: 1; } 100% { transform: translateY(160px) translateX(-28px) rotate(-15deg); opacity: 0; } }
@keyframes pack-stack-out { 0% { transform: rotate(-4deg); } 65% { transform: translateY(-65px) rotate(2deg) scale(1.04); } 100% { transform: translateY(-50px) rotate(0deg) scale(1.04); } }

@media (max-width: 850px) {
  .pack-app { padding: 0 24px; }
  .pack-chase { max-width: 180px; }
  .pack-chase > div:last-child { display: none; }
  .pack-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pack-reveal { gap: 25px; }
  .pack-card-presentation { width: min(260px, 100%); }
  .pack-selection { padding: 25px; }
}
@media (max-width: 560px) {
  .pack-app { padding: 0 16px; }
  .pack-header { min-height: 79px; }
  .pack-header-meta { gap: 6px; }
  .pack-header-meta .pack-text-button { display: none; }
  .pack-tabs { gap: 20px; margin-bottom: 26px; }
  .pack-tab { font-size: 12px; }
  .pack-player { display: none; }
  .pack-heading .pack-muted { font-size: 12px; }
  .pack-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pack-wrapper-stage { height: 170px; }
  .pack-cover { width: 86px; }
  .pack-tile-name { font-size: 14px; }
  .pack-chase, .pack-selection-cover { display: none; }
  .pack-selection { padding: 22px; }
  .pack-selection h2 { font-size: 24px; }
  .pack-selection .pack-muted { font-size: 12px; }
  .pack-bottom-stats { gap: 10px 20px; }
  .pack-bottom-stats span:last-child { margin-left: 0; }
  .pack-reveal { grid-template-columns: 1fr; gap: 10px; }
  .pack-card-stage { min-height: 390px; }
  .pack-unwrapping { padding: 8px 12px 23px; min-height: 470px; }
  .pack-tear-scene { height: 390px; }
  .pack-tear-wrapper { width: 178px; left: calc(50% - 89px); }
  .pack-sealed-stack { width: 160px; height: 224px; top: 100px; left: calc(50% - 80px); }
  .pack-tear-status { font-size: 12px; }
  .pack-card-presentation { width: 225px; }
  .pack-card-presentation[data-orientation="landscape"] { width: min(320px, calc(100% - 24px)); }
  .pack-reveal-details { text-align: center; }
  .pack-reveal-details h2 { font-size: 29px; }
  .pack-reveal-details .pack-actions { justify-content: center; }
  .pack-card-value { margin-top: 15px; font-size: 25px; }
  .pack-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .pack-mini-card > strong { font-size: 12px; }
  .pack-mini-card > .pack-muted, .pack-mini-value { font-size: 12px; }
  .pack-summary-bottom { align-items: flex-start; flex-direction: column; }
  .pack-collection-controls input { width: 190px; }
  .pack-resume { flex-direction: column; align-items: flex-start; }
  .pack-history-row { padding: 18px 3px; }
  .pack-history-row strong { font-size: 12px; }
  .pack-odds-table th, .pack-odds-table td { padding: 12px 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pack-app *, .pack-app *::before, .pack-app *::after { animation: none !important; transition: none !important; } .pack-hit-halo, .pack-hit-burst, .pack-hit-caption { display: none !important; } }

/* Reveal motion runs only after a saved response, over an authentic card back. */
.pack-card-presentation { transform-style: preserve-3d; }
.pack-tilt-plane, .pack-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pack-flip-back { transform: rotateY(180deg); box-shadow: none; }
.pack-card-presentation.is-arriving { animation: pack-turn-in .6s cubic-bezier(.2,.7,.25,1) both; }
.pack-card-presentation.is-arriving:not([data-tier="ordinary"]) { animation: pack-turn-in .85s cubic-bezier(.2,.7,.25,1) both; }
.pack-card-presentation.is-arriving[data-tier="special"], .pack-card-presentation.is-arriving[data-tier="gold"] { animation-duration: 1.05s; }
.pack-departing { position: absolute; top: 50%; left: 50%; z-index: 5; pointer-events: none; animation: pack-slide-away .4s cubic-bezier(.32,.05,.3,1) both; }
.pack-reveal-details.is-hit-reveal { animation: pack-copy-in .35s ease-out both; }
.pack-actions.is-requesting .pack-primary { position: relative; opacity: .85; }
.pack-actions.is-requesting .pack-primary::after { position: absolute; right: 10px; top: calc(50% - 6px); content: ''; display: block; width: 9px; height: 9px; margin-left: 0; border: 2px solid #281e0c40; border-top-color: #281e0c; border-radius: 50%; animation: pack-request-spin .7s linear infinite; }
.pack-reveal-error { font-size: 12px; padding: 8px 10px; margin-bottom: 7px !important; }
@keyframes pack-turn-in { 0% { transform: rotateY(180deg) translateY(6px) scale(.96); } 100% { transform: rotateY(0) translateY(0) scale(1); } }
@keyframes pack-slide-away { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg); } 100% { opacity: 0; transform: translate(-95%, -55%) rotate(-17deg); } }
@keyframes pack-copy-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pack-request-spin { to { transform: rotate(360deg); } }

/* Foil follows the printed layout; scans remain visible beneath a restrained reflection. */
.pack-compact-picker, .pack-mobile-cover { display: none; }

/* The active opening is its own compact screen, with space allocated to the card. */
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) { height: 100vh; height: 100dvh; min-height: 480px; display: flex; flex-direction: column; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-header { min-height: 58px; flex: 0 0 58px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-logo { width: 34px; height: 34px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-logo img { width: 32px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-brand span { display: none; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tabs { margin-bottom: 12px; flex: 0 0 auto; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tab { padding: 7px 0 10px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading { margin-bottom: 10px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading h1 { font-size: 27px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading .pack-kicker { margin-bottom: 3px; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading > .pack-muted { display: none; }
.pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-footer { display: none; }
.pack-app[data-view="opening"] .pack-progress { flex: 0 0 3px; width: 100%; }
.pack-app[data-view="opening"] .pack-reveal { flex: 1 1 0; min-height: 0; padding: 12px 0 0; gap: 30px; }
.pack-app[data-view="opening"] .pack-card-stage { min-height: 0; height: 100%; padding: 20px 8px 48px; }
.pack-app[data-view="opening"] .pack-card-presentation { width: auto; height: min(100%, 445px); max-width: 100%; aspect-ratio: var(--card-aspect, 245 / 342); }
.pack-app[data-view="opening"] .pack-tilt-plane, .pack-app[data-view="opening"] .pack-card-face.large { height: 100%; }
.pack-app[data-view="opening"] .pack-card-stage > .pack-tilt-hint { position: absolute; bottom: 27px; margin: 0 !important; font-size: 12px; }
.pack-app[data-view="opening"] .pack-foil-note { display: none; }
.pack-app[data-view="opening"] .pack-reveal-tray { display: none; }
.pack-app[data-view="opening"] .pack-hit-halo { height: 100%; }
.pack-app[data-view="opening"] .pack-hit-caption { top: 0; font-size: 12px; }
.pack-app[data-view="opening"] .pack-reveal-details .pack-actions { flex-wrap: nowrap; }
.pack-app[data-view="opening"] .pack-departing { height: min(calc(100% - 68px), 445px); margin-top: -14px; }
.pack-app[data-view="unwrapping"] .pack-unwrapping { flex: 1 1 0; min-height: 0; padding: 8px 16px 12px; display: flex; flex-direction: column; }
.pack-app[data-view="unwrapping"] .pack-tear-scene { flex: 1 1 0; min-height: 0; height: auto; width: min(430px, 100%); --pack-width: min(208px, calc((var(--pack-viewport-height, 100dvh) - 280px) * .5)); }
.pack-app[data-view="unwrapping"] .pack-tear-wrapper { width: var(--pack-width); left: calc(50% - var(--pack-width) / 2); top: 27px; }
.pack-app[data-view="unwrapping"] .pack-sealed-stack { width: calc(var(--pack-width) * .88); height: auto; aspect-ratio: 245 / 342; left: calc(50% - var(--pack-width) * .44); top: 70px; }
.pack-app[data-view="unwrapping"] .pack-tear-status { flex: 0 0 auto; margin-bottom: 7px !important; }
.pack-app[data-view="unwrapping"] .pack-actions { flex: 0 0 auto; }

@media (max-width: 700px), (max-height: 500px) {
  .pack-compact-picker { display: grid; gap: 7px; margin: 16px 0; }
  .pack-compact-picker label { font-size: 12px; color: var(--pack-muted); text-transform: uppercase; letter-spacing: .12em; }
  .pack-compact-picker select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; font-size: 16px; color: var(--pack-text); background: var(--pack-raised); border: 1px solid #f3c65c50; border-radius: 8px; }
  .pack-app[data-view="packs"] .pack-filters, .pack-app[data-view="packs"] .pack-picker-grid { display: none; }
  .pack-mobile-cover { display: grid; place-items: center; }
  .pack-mobile-cover .pack-cover { width: min(100px, 24vw); transform: rotate(-5deg); }
  .pack-selection { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 17px; padding: 18px; }
  .pack-selection-copy { min-width: 0; }
  .pack-selection-copy > .pack-kicker { font-size: 12px; }
  .pack-selection h2 { font-size: 22px; }
  .pack-selection .pack-muted { font-size: 12px; }
  .pack-pills { font-size: 12px; margin: 10px 0 14px; gap: 3px 8px; }
  .pack-selection .pack-actions { gap: 7px; }
  .pack-selection .pack-actions .pack-primary { width: 100%; min-height: 44px; font-size: 12px; padding-inline: 8px; }
  .pack-selection .pack-actions .pack-text-button { padding: 2px 0; font-size: 12px; }
  .pack-selection .pack-chase, .pack-selection .pack-selection-cover { display: none; }
  .pack-app[data-view="packs"] .pack-header { min-height: 62px; }
  .pack-app[data-view="packs"] .pack-tabs { margin-bottom: 18px; gap: 20px; }
  .pack-app[data-view="packs"] .pack-heading { margin-bottom: 12px; }
  .pack-app[data-view="packs"] .pack-heading h1 { font-size: 26px; }
  .pack-app[data-view="packs"] .pack-heading > .pack-muted { font-size: 12px; margin-top: 7px; }
  .pack-app[data-view="packs"] .pack-footer { font-size: 12px; padding: 12px 0; margin-top: 0; }
}
@media (max-width: 700px) and (min-height: 501px) {
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) { min-height: 500px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-header { min-height: 43px; flex-basis: 43px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-brand strong { font-size: 12px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-test-badge { padding: 3px 6px; font-size: 12px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tabs { margin-bottom: 9px; gap: 22px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tab { font-size: 12px; padding: 6px 0 8px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading h1 { font-size: 23px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading .pack-kicker { font-size: 12px; }
  .pack-app[data-view="opening"] .pack-reveal { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 7px; padding-top: 7px; }
  .pack-app[data-view="opening"] .pack-card-stage { padding: 17px 10px 20px; }
  .pack-app[data-view="opening"] .pack-card-stage > .pack-tilt-hint { bottom: 0; font-size: 12px; }
  .pack-app[data-view="opening"] .pack-card-presentation { max-width: calc(100% - 24px); max-height: 100%; }
  .pack-app[data-view="opening"] .pack-reveal-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; text-align: left; }
  .pack-app[data-view="opening"] .pack-reveal-details > .pack-kicker { font-size: 12px; margin-bottom: 2px; grid-column: 1 / -1; }
  .pack-app[data-view="opening"] .pack-reveal-details > h2 { font-size: 20px; grid-column: 1 / -1; margin-bottom: 2px; }
  .pack-app[data-view="opening"] .pack-reveal-details > .pack-muted { font-size: 12px; grid-column: 1 / -1; }
  .pack-app[data-view="opening"] .pack-finish { font-size: 12px; margin-top: 3px; padding: 2px 6px; justify-self: start; }
  .pack-app[data-view="opening"] .pack-card-value { font-size: 21px; margin: 0; grid-column: 2; grid-row: 3 / 5; }
  .pack-app[data-view="opening"] .pack-price-note { grid-column: 1 / -1; font-size: 12px; margin: 4px 0 5px !important; }
  .pack-app[data-view="opening"] .pack-reveal-details > .pack-primary, .pack-app[data-view="opening"] .pack-reveal-details > .pack-actions { grid-column: 1 / -1; }
  .pack-app[data-view="opening"] .pack-reveal-details .pack-actions { gap: 9px; }
  .pack-app[data-view="opening"] .pack-reveal-details .pack-primary { flex: 1; min-height: 46px; padding: 10px 12px; font-size: 13px; }
  .pack-app[data-view="opening"] .pack-reveal-details .pack-text-button { min-height: 44px; font-size: 12px; padding: 10px; }
  .pack-app[data-view="opening"] .pack-reveal-error, .pack-app[data-view="opening"] .pack-special { grid-column: 1 / -1; }
  .pack-app[data-view="opening"] .pack-special { margin-bottom: 3px !important; font-size: 13px; }
  .pack-app[data-view="opening"] .pack-departing { height: calc(100% - 37px); margin-top: -1px; }
  .pack-app[data-view="unwrapping"] .pack-tear-scene { --pack-width: min(208px, calc((var(--pack-viewport-height, 100dvh) - 250px) * .48)); }
}
@media (max-height: 500px) and (min-width: 501px) {
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) { min-height: 320px; padding-inline: 20px; padding-bottom: 8px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-header { min-height: 34px; flex-basis: 34px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-brand strong { font-size: 12px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-logo { width: 26px; height: 26px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-logo img { width: 25px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tabs { margin-bottom: 5px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-tab { font-size: 12px; padding: 3px 0 5px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading h1 { font-size: 20px; }
  .pack-app:is([data-view="opening"], [data-view="unwrapping"]) .pack-heading .pack-kicker { font-size: 12px; }
  .pack-app[data-view="opening"] .pack-reveal { grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 5px; }
  .pack-app[data-view="opening"] .pack-card-stage { padding: 10px 8px 17px; }
  .pack-app[data-view="opening"] .pack-card-stage > .pack-tilt-hint { bottom: 0; font-size: 12px; }
  .pack-app[data-view="opening"] .pack-reveal-details { text-align: left; }
  .pack-app[data-view="opening"] .pack-reveal-details .pack-kicker { font-size: 12px; margin-bottom: 2px; }
  .pack-app[data-view="opening"] .pack-reveal-details h2 { font-size: 21px; margin-bottom: 2px; }
  .pack-app[data-view="opening"] .pack-reveal-details .pack-muted { font-size: 12px; }
  .pack-app[data-view="opening"] .pack-finish { font-size: 12px; margin-top: 3px; padding: 2px 6px; }
  .pack-app[data-view="opening"] .pack-card-value { margin-top: 3px; font-size: 21px; }
  .pack-app[data-view="opening"] .pack-price-note { font-size: 12px; margin: 2px 0 8px !important; }
  .pack-app[data-view="opening"] .pack-actions { gap: 4px; }
  .pack-app[data-view="opening"] .pack-primary { min-height: 40px; font-size: 12px; padding: 8px 12px; }
  .pack-app[data-view="opening"] .pack-text-button { font-size: 12px; padding: 8px; }
  .pack-app[data-view="opening"] .pack-departing { height: calc(100% - 27px); margin-top: -3px; }
  .pack-app[data-view="unwrapping"] .pack-unwrapping { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center; }
  .pack-app[data-view="unwrapping"] .pack-tear-scene { grid-row: 1 / -1; height: 100%; --pack-width: min(160px, calc((var(--pack-viewport-height, 100dvh) - 155px) * .47)); }
  .pack-app[data-view="unwrapping"] .pack-tear-wrapper { top: 20px; }
  .pack-app[data-view="unwrapping"] .pack-sealed-stack { top: 45px; }
  .pack-app[data-view="unwrapping"] .pack-tear-status { align-self: end; }
  .pack-app[data-view="unwrapping"] .pack-actions { align-self: start; margin-top: 8px; }
}
/* Size both portrait and landscape frames from available card-stage space. */
.pack-app[data-view="opening"] .pack-card-stage { container-type: size; --card-room: 68px; }
.pack-app[data-view="opening"] .pack-card-presentation { width: min(calc(100cqw - 24px), calc((100cqh - 4px) * var(--card-ratio, .716)), calc(445px * var(--card-ratio, .716))); height: auto; max-width: none; max-height: none; }
.pack-app[data-view="opening"] .pack-departing { height: auto; }
@media (max-width: 700px) and (min-height: 501px) {
  .pack-app[data-view="opening"] .pack-card-stage { --card-room: 37px; }
  .pack-app[data-view="opening"] .pack-reveal-details > .pack-muted { grid-column: 1; grid-row: 3; }
  .pack-app[data-view="opening"] .pack-finish { grid-column: 1; grid-row: 4; }
}
@media (max-height: 500px) and (min-width: 501px) {
  .pack-app[data-view="opening"] .pack-card-stage { --card-room: 27px; }
}

.pack-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pack-card-presentation[data-orientation="landscape"] .pack-flip-back img { position: absolute; width: calc(100% / var(--card-ratio)); height: calc(100% * var(--card-ratio)); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); }

/* The binder and loose-card views share the same collection and exact print counts. */
.pack-collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.pack-collection-heading .pack-heading { margin-bottom: 0; }
.pack-collection-heading h1 { font-size: clamp(26px, 3.1vw, 38px); }
.pack-collection-heading .pack-heading > .pack-muted { font-size: 12px; }
.pack-view-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid #ffffff20; border-radius: 13px; background: var(--pack-surface); flex-shrink: 0; }
.pack-view-option { border: 0; background: transparent; color: var(--pack-muted); padding: 9px 17px; font-size: 13px; border-radius: 9px; }
.pack-view-option.active { background: #f3c65c10; color: var(--pack-text); box-shadow: inset 0 0 0 1px #f3c65c25; }
.pack-view-option.active:hover:not(:disabled) { background: #f3c65c18; }
.pack-select-field { min-width: 0; display: grid; gap: 6px; }
.pack-select-field > span { color: var(--pack-muted); font-size: 12px; letter-spacing: .05em; }
.pack-select-field select { min-width: 0; width: 100%; min-height: 42px; padding: 9px 12px; color: var(--pack-text); background: var(--pack-raised); border: 1px solid #ffffff25; border-radius: 7px; font-size: 13px; }
.pack-binder-toolbar { display: flex; align-items: end; gap: 24px; margin-bottom: 15px; }
.pack-binder-toolbar > .pack-select-field { flex: 1; max-width: 330px; }
.pack-binder-progress-copy { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.pack-binder-progress-copy strong { font-size: 14px; color: #e2d7bf; }
.pack-binder-progress-copy .pack-muted { font-size: 12px; }
.pack-binder-progress-copy progress { width: min(260px, 100%); height: 4px; margin-top: 3px; border: 0; border-radius: 4px; background: #ffffff14; accent-color: var(--pack-gold); overflow: hidden; }
.pack-binder-progress-copy progress::-webkit-progress-bar { background: #ffffff14; }
.pack-binder-progress-copy progress::-webkit-progress-value { background: var(--pack-gold); }
.pack-binder-progress-copy progress::-moz-progress-bar { background: var(--pack-gold); }
.pack-binder-explainer { max-width: 640px; margin: 16px auto 0 !important; font-size: 12px; color: var(--pack-muted); text-align: center; }
.pack-binder-start { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 12px; }
.pack-collection-controls { display: grid; grid-template-columns: minmax(190px, 1.5fr) minmax(155px, 1.2fr) minmax(130px, .8fr) minmax(140px, .9fr); align-items: end; gap: 12px; }
.pack-collection-controls form { min-width: 0; }
.pack-collection-controls input { width: 100%; min-height: 42px; }
.pack-collection-controls form .pack-button { padding: 9px 12px; font-size: 12px; }
.pack-grid-result-count { color: var(--pack-muted); font-size: 12px; margin-top: 18px !important; }
.pack-grid-empty { grid-column: 1 / -1; border: 1px dashed #f3c65c30; padding: 38px 18px; border-radius: 10px; text-align: center; }
.pack-grid-empty h2 { font-size: 23px; }
.pack-grid-empty p { margin: 10px 0 20px; }
.pack-grid-results { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }
.pack-grid-results .pack-grid-result-count { margin-top: 0 !important; }
.pack-grid-results > button { padding-block: 4px; }
.pack-binder-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pack-binder-style-button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
.pack-binder-customizer { --pack-gold: #f3c65c; --pack-muted: #a8a6ae; width: min(680px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; overflow: auto; padding: 24px; color: var(--pack-text); background: var(--pack-surface); border: 1px solid #ffffff26; border-radius: 18px; box-shadow: 0 24px 90px #000a; }
.pack-binder-customizer::backdrop { background: #08070bcb; }
.pack-checklist-dialog { display: none; width: min(650px, calc(100vw - 28px)); height: min(690px, calc(100dvh - 28px)); overflow: hidden; }
.pack-checklist-dialog[open] { display: flex; flex-direction: column; }
.pack-checklist-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .6fr); gap: 12px; align-items: end; margin: 18px 0 10px; }
.pack-checklist-status { color: var(--pack-muted); font-size: 12px; padding-bottom: 10px; }
.pack-checklist-rows { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-block: 1px solid var(--pack-line); flex: 1; }
.pack-checklist-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 68px; gap: 12px; align-items: center; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--pack-line); border-radius: 0; background: none; text-align: left; }
.pack-checklist-row:last-child { border-bottom: 0; }
.pack-checklist-row:hover:not(:disabled) { background: #ffffff05; }
.pack-checklist-row:focus-visible { outline-offset: -3px; }
.pack-checklist-number { font-variant-numeric: tabular-nums; font-size: 12px; color: #d5c8ab; }
.pack-checklist-card, .pack-checklist-location { display: grid; gap: 2px; min-width: 0; }
.pack-checklist-card strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-checklist-card > span, .pack-checklist-location > span { color: var(--pack-muted); font-size: 12px; }
.pack-checklist-location { text-align: right; }
.pack-checklist-location strong { font-size: 12px; font-weight: 500; color: var(--pack-muted); }
.pack-checklist-location .is-owned { color: var(--pack-gold); }
.pack-checklist-hint { color: var(--pack-muted); font-size: 12px; padding-top: 12px; }
.pack-checklist-pagination { display: flex; justify-content: center; gap: 18px; align-items: center; padding-top: 12px; font-size: 12px; }
.pack-checklist-pagination button { min-width: 42px; }
.pack-checklist-empty { padding: 28px 12px; text-align: center; }
.pack-checklist-empty p { font-size: 12px; margin-top: 8px; }
.pack-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack-dialog-heading .pack-kicker { margin-bottom: 5px; font-size: 12px; }
.pack-dialog-heading h2 { font-size: 26px; }
.pack-dialog-close { padding: 0; width: 36px; height: 36px; font-size: 26px; }
.pack-binder-style-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: start; margin: 22px 0; }
.pack-binder-style-visual { min-width: 0; position: sticky; top: 12px; }
.pack-binder-preview-tabs { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.pack-binder-preview-tabs .pack-text-button { min-height: 32px; padding: 5px 12px; font-size: 12px; border: 1px solid transparent; border-radius: 7px; }
.pack-binder-preview-tabs .pack-text-button[aria-pressed="true"] { color: var(--pack-gold, #f1dc86); border-color: #e4cd7338; background: #e4cd7310; }
.pack-binder-style-preview .tcg-binder { margin: 0; }
.pack-binder-style-preview .binder-toolbar, .pack-binder-style-preview .binder-controls, .pack-binder-style-preview .binder-status { display: none; }
.pack-binder-style-preview .binder-stage { padding: 16px 8px; }
.pack-binder-style-preview .tcg-binder[data-layout="single"] .binder-book { width: 145px; }
.pack-binder-style-preview .binder-cover-kicker { font-size: 4px !important; }
.pack-binder-style-preview .binder-cover-label > span:first-child { font-size: 5px; }
.pack-binder-style-preview .binder-cover-label strong { font-size: 16px !important; }
.pack-binder-style-preview .binder-cover-open { font-size: 4px; }
.pack-binder-style-preview .binder-cover-spine { font-size: 4px; }
.pack-binder-style-fields { display: grid; gap: 13px; }
.pack-binder-style-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pack-binder-style-fields > :first-child, .pack-style-cover-label { grid-column: 1 / -1; }
.binder-logo-picker { min-width: 0; margin: 2px 0 0; padding: 0; border: 0; grid-column: 1 / -1; }
.binder-logo-picker legend { margin: 0 0 8px; padding: 0; color: #c9c2cf; font-size: 12px; }
.binder-logo-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.binder-logo-option { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--pack-muted); text-align: center; }
.binder-logo-sample { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; min-width: 0; height: 57px; padding: 10px; overflow: hidden; border: 1px solid #ffffff25; border-radius: 8px; background: #25242a; }
.binder-logo-sample[data-backing="light"] { background: #eee8dc; border-color: #d3cbbb; }
.binder-logo-sample img { display: block; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.binder-logo-empty { color: #9d94a7; font-size: 20px; }
.binder-logo-name { display: block; margin-top: 7px; font-size: 12px; line-height: 1.4; }
.binder-logo-option[aria-pressed="true"] { color: #f1d58d; }
.binder-logo-option[aria-pressed="true"] .binder-logo-sample { outline: 2px solid #e9c46e; outline-offset: 2px; }
.binder-logo-option:hover .binder-logo-sample { border-color: #e9c46e; }
.binder-logo-placement { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.binder-logo-position { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px; border: 1px solid #ffffff24; border-radius: 7px; background: var(--pack-raised); color: var(--pack-muted); font-size: 12px !important; }
.binder-logo-position[aria-pressed="true"] { border-color: #c9a76188; color: #eed394; background: #9b794b16; }
.binder-logo-position:disabled { opacity: .4; cursor: default; }
.binder-logo-position-icon { position: relative; width: 14px; height: 18px; border: 1px solid currentColor; border-radius: 2px; opacity: .85; }
.binder-logo-position-icon i { position: absolute; right: 2px; bottom: 2px; width: 4px; height: 3px; background: currentColor; }
.binder-logo-position-icon[data-position="bottom-left"] i { left: 2px; right: auto; }
.binder-logo-hint { margin: 8px 0 0; color: var(--pack-muted); font-size: 12px; line-height: 1.5; }
.binder-logo-hint[hidden] { display: none; }
.pack-binder-customizer .pack-select-field input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #ffffff25; border-radius: 7px; background: var(--pack-raised); color: var(--pack-text); font: inherit; }
.pack-binder-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pack-style-colors { grid-column: 1 / -1; }
.pack-binder-swatch { display: grid; place-items: center; padding: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--swatch); border: 3px solid var(--pack-surface); box-shadow: 0 0 0 1px #ffffff25; color: #fff; }
.pack-binder-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--swatch); }
.pack-binder-swatch > span { opacity: 0; font-size: 15px; font-weight: 700; }
.pack-binder-swatch[aria-pressed="true"] > span { opacity: 1; }
.pack-binder-swatch:hover:not(:disabled) { background: var(--swatch); border-color: var(--pack-surface); }
.pack-style-save-note { color: var(--pack-muted); font-size: 12px; line-height: 1.5; }
.pack-dialog-actions { display: flex; justify-content: end; gap: 9px; margin-top: 17px; }
.pack-dialog-actions .pack-button { padding: 9px 12px; font-size: 12px; }
.pack-dialog-actions > :first-child { margin-right: auto; }
.pack-binder-customizer:not(.pack-checklist-dialog) .pack-dialog-actions { position: sticky; bottom: -24px; padding-block: 12px; margin-bottom: -24px; background: var(--pack-surface); border-top: 1px solid var(--pack-line); z-index: 2; }
@media (max-width: 500px) {
  .pack-binder-customizer { padding: 18px; }
  .pack-binder-style-layout { grid-template-columns: 1fr; gap: 12px; margin: 10px 0 15px; }
  .pack-binder-style-visual { position: static; }
  .pack-binder-style-preview { height: 139px; }
  .pack-binder-style-preview .binder-stage { padding: 8px; }
  .pack-binder-style-preview .tcg-binder[data-layout="single"] .binder-book { width: 89px; }
  .pack-binder-style-preview .binder-cover-label strong { font-size: 12px !important; }
  .pack-binder-style-preview .binder-cover-label > span:first-child { font-size: 3px; }
  .pack-binder-style-preview .binder-cover-open { display: none; }
  .pack-binder-style-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pack-binder-style-fields > :first-child, .pack-binder-style-fields > :last-child { grid-column: 1 / -1; }
  .pack-binder-customizer .pack-select-field select, .pack-binder-customizer .pack-select-field input { font-size: 16px; padding-inline: 8px; }
  .pack-binder-customizer .pack-dialog-actions { gap: 5px; }
  .pack-binder-customizer:not(.pack-checklist-dialog) .pack-dialog-actions { position: sticky; bottom: -18px; padding-block: 12px; margin-bottom: -18px; background: var(--pack-surface); border-top: 1px solid var(--pack-line); z-index: 2; }
  .pack-binder-customizer .pack-dialog-actions .pack-button { font-size: 12px; padding: 9px; }
  .pack-binder-actions { gap: 4px; }
  .pack-app[data-view="collection"] .pack-binder-style-button { min-height: 30px; padding: 6px 8px; font-size: 12px; }
}
@media (max-width: 900px) {
  .pack-collection-controls { grid-template-columns: 1fr 1fr; }
  .pack-collection-controls form { align-self: end; }
}
@media (max-width: 700px), (max-height: 500px) {
  .pack-app[data-view="collection"] .pack-header { min-height: 42px; }
  .pack-app[data-view="collection"] .pack-brand strong { font-size: 12px; }
  .pack-app[data-view="collection"] .pack-brand span { font-size: 12px; }
  .pack-app[data-view="collection"] .pack-logo { width: 34px; height: 34px; }
  .pack-app[data-view="collection"] .pack-logo img { width: 32px; }
  .pack-app[data-view="collection"] .pack-tabs { margin-bottom: 8px; gap: 16px; }
  .pack-app[data-view="collection"] .tcg-binder[data-layout="single"] { --binder-page-height: clamp(200px, calc(100dvh - 390px), 520px); }
  .pack-app[data-view="collection"] .pack-tab { padding: 6px 0 8px; }
  .pack-app[data-view="collection"] .pack-footer { padding: 14px 0; margin-top: 15px; font-size: 12px; }
  .pack-collection-heading { align-items: center; flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
  .pack-collection-heading .pack-heading { flex: 1; min-width: 0; }
  .pack-collection-heading .pack-kicker { font-size: 12px; margin-bottom: 3px; }
  .pack-collection-heading h1 { display: block; font-size: 12px; line-height: 1.25; letter-spacing: 0; margin-bottom: 3px; }
  .pack-collection-heading .pack-heading > .pack-muted { font-size: 12px; margin-top: 0; line-height: 1.4; }
  .pack-view-switch { padding: 3px; }
  .pack-view-option { padding: 7px 10px; min-height: 34px; font-size: 12px; }
  .pack-binder-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
  .pack-binder-toolbar > .pack-select-field { grid-column: 1 / -1; max-width: none; }
  .pack-binder-toolbar > .pack-select-field > span { display: none; }
  .pack-binder-toolbar select { min-height: 36px; padding-block: 6px; }
  .pack-select-field select, .pack-collection-controls input { font-size: 16px; }
  .pack-binder-toolbar > .pack-text-button { font-size: 12px; padding: 8px 3px; }
  .pack-binder-progress-copy strong { font-size: 12px; }
  .pack-binder-progress-copy .pack-muted { font-size: 12px; }
  .pack-binder-explainer { font-size: 12px; }
  .pack-binder-start { flex-wrap: wrap; font-size: 12px; }
  .pack-collection-controls { gap: 12px 9px; }
  .pack-collection-controls form { grid-column: 1 / -1; }
  .pack-collection-controls > .pack-select-field:first-of-type { grid-column: 1 / -1; }
  .pack-app[data-view="collection"] .binder-toolbar { margin-bottom: 5px; }
  .pack-app[data-view="collection"] .binder-identity strong { font-size: 13px; }
  .pack-app[data-view="collection"] .binder-eyebrow { display: none; }
  .pack-app[data-view="collection"] .binder-cover-action { min-height: 30px; padding: 6px 10px; font-size: 12px; }
}

/* A catalogue with the chosen booster always in reach, like a pack set aside on the desk. */
.pack-picker-layout, .pack-catalog { min-width: 0; }
.pack-tile { position: relative; }
.pack-tile.selected::after { content: '✓'; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #f3c65c55; border-radius: 50%; background: #1c1917; color: var(--pack-gold); font-size: 12px; }
.pack-tile-series { font-size: 12px; letter-spacing: .02em; }
.pack-tile-meta { font-variant-numeric: tabular-nums; }
.pack-selection-copy { min-width: 0; }
.pack-selection .pack-kicker { color: #bdb5a8; }
.pack-selection .pack-primary { display: flex; align-items: center; justify-content: space-between; }
.pack-selection .pack-primary > .pack-button-arrow { border-left: 1px solid #281e0c26; padding-left: 14px; margin-left: 18px; }
.pack-binder-progress-copy strong, .pack-bottom-stats, .pack-card-value, .pack-total-value { font-variant-numeric: tabular-nums; }
.pack-app :is(input, select):focus-visible { outline-offset: 3px; }
.pack-app :is(.pack-select-field select, .pack-collection-controls input, .pack-compact-picker select, .pack-binder-customizer input) { border-color: #ffffff26; border-radius: 10px; box-shadow: inset 0 1px 2px #0002; }
.pack-app :is(.binder-toolbar, .binder-controls) .binder-button { border-radius: var(--pack-radius); min-height: 44px; background: var(--pack-raised); border-color: #ffffff29; color: var(--pack-text); transition: background-color .16s, border-color .16s, transform .16s; }
.pack-app :is(.binder-toolbar, .binder-controls) .binder-button:hover:not(:disabled) { background: var(--pack-hover); border-color: #ffffff50; }
.pack-app :is(.binder-toolbar, .binder-controls) .binder-button:active:not(:disabled) { transform: translateY(1px); }
.pack-app .binder-controls .binder-jump { color: var(--pack-muted); }
.pack-app .binder-controls .binder-jump input { background: var(--pack-surface); border-color: #ffffff29; color: var(--pack-text); border-radius: 8px; }
.pack-app .binder-toolbar .binder-eyebrow { color: #b8a77f; }
.pack-dialog-close { border-radius: 50%; }
.pack-dialog-close:hover:not(:disabled) { background: #ffffff09; }
@media (min-width: 701px) and (min-height: 501px) {
  .pack-picker-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 28px; }
  .pack-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 0; }
  .pack-wrapper-stage { height: 176px; }
  .pack-wrapper-stage .pack-cover { width: 80px; }
  .pack-tile > span, .pack-tile > strong { padding-inline: 13px; }
  .pack-tile-name { font-size: 13px; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; }
  .pack-tile-series { margin-top: 5px; }
  .pack-tile-meta { font-size: 12px; }
  .pack-selection { position: sticky; top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 24px; border-top: 1px solid #ffffff26; border-radius: 12px; }
  .pack-selection .pack-mobile-cover { display: grid; place-items: center; height: 168px; margin-bottom: 22px; background: radial-gradient(ellipse at 50% 70%, #f3c65c08, transparent 65%); }
  .pack-selection .pack-mobile-cover .pack-cover { width: 88px; transform: rotate(-4deg); }
  .pack-selection-copy h2 { font-size: 25px; line-height: 1.2; margin: 0 0 10px; }
  .pack-selection .pack-muted { font-size: 12px; line-height: 1.6; }
  .pack-selection-copy > .pack-kicker { font-size: 12px; margin-bottom: 8px; }
  .pack-selection .pack-pills { margin: 14px 0 20px; font-size: 12px; gap: 5px 10px; }
  .pack-selection .pack-actions { gap: 10px; justify-content: center; }
  .pack-selection .pack-primary { width: 100%; min-height: 46px; padding: 11px 17px; font-size: 13px; }
  .pack-selection .pack-text-button { font-size: 12px; padding: 6px 9px; }
  .pack-selection .pack-chase { max-width: none; border-top: 1px solid var(--pack-line); padding-top: 19px; margin-top: 16px; gap: 18px; }
  .pack-selection .pack-chase .pack-image { width: 50px; min-width: 50px; height: 70px; transform: rotate(4deg); }
  .pack-selection .pack-chase > div:last-child { display: block; }
  .pack-selection .pack-chase strong { font-size: 12px; margin: 3px 0; }
  .pack-selection .pack-chase .pack-muted { font-size: 12px; }
  .pack-selection .pack-chase .pack-kicker { font-size: 12px; letter-spacing: .05em; }
  .pack-selection .pack-selection-cover { display: none; }
  .pack-heading { margin-bottom: 20px; }
  .pack-bottom-stats { border-top: 1px solid var(--pack-line); margin-top: 26px; }
}
@media (min-width: 701px) and (max-width: 1020px) and (min-height: 501px) {
  .pack-picker-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
  .pack-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-selection { padding: 20px; }
}
/* Short windows get a smaller wrapper so the opening action remains in view. */
@media (min-width: 701px) and (min-height: 501px) and (max-height: 700px) {
  .pack-selection { padding: 18px; top: 12px; }
  .pack-selection .pack-mobile-cover { height: 100px; margin-bottom: 14px; }
  .pack-selection .pack-mobile-cover .pack-cover { width: 54px; }
  .pack-selection .pack-chase { display: none; }
  .pack-selection-copy h2 { font-size: 23px; }
}
@media (max-width: 700px), (max-height: 500px) {
  .pack-catalog-search, .pack-selection-label .pack-favorite { display: none; }
  .pack-compact-label .pack-favorite { min-height: 24px; height: 24px; padding-block: 0; }
  .pack-compact-picker { margin-block: 10px; }
  .pack-selection-label { margin: 0; }
  .pack-checklist-fields { gap: 8px; grid-template-columns: minmax(0, 1fr) 126px; }
  .pack-checklist-fields > input { font-size: 16px; }
  .pack-checklist-row { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 7px; padding-inline: 2px; }
  .pack-checklist-number { font-size: 12px; }
  .pack-checklist-card strong { font-size: 12px; }
  .pack-checklist-hint { font-size: 12px; }
  .pack-binder-actions { flex-wrap: wrap; justify-content: flex-end; }
  .pack-app[data-view="collection"] > .tcg-binder[data-layout="single"] .binder-identity { display: none; }
  .pack-app[data-view="collection"] > .tcg-binder[data-layout="single"] .binder-toolbar { justify-content: flex-end; }
  .pack-selection .pack-primary { justify-content: center; }
  .pack-selection .pack-primary > .pack-button-arrow { margin-left: 12px; padding-left: 10px; }
  .pack-selection { border-top: 1px solid #ffffff26; }
  .pack-test-badge { font-size: 12px; padding: 4px 8px; }
  .pack-resume { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px !important; }
  .pack-resume > .pack-button { flex-shrink: 0; }
  .pack-app[data-view="packs"]:has(.pack-resume) .pack-heading { display: none; }
}
.pack-selection .pack-favorite { font-size: 24px; padding: 6px; }

/* Expansion chooser: a compact field opens an illustrated, searchable library. */
.pack-expansion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; min-height: 58px; border: 1px solid #cda75a65; border-radius: 10px; background: linear-gradient(105deg, #211e23, #19181e); color: #f2eff4; text-align: left; box-shadow: inset 0 1px #ffffff06; }
.pack-expansion-trigger:hover:not(:disabled) { border-color: #d7ad57; background: #242127; }
.pack-expansion-copy { min-width: 0; display: grid; gap: 3px; }
.pack-expansion-copy strong { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-expansion-copy > span { color: #a39baa; font-size: 12px; line-height: 1.2; }
.pack-expansion-chevron { flex-shrink: 0; color: #d7ad57; font-size: 22px; line-height: 1; margin-top: -5px; }
.pack-expansion-dialog { box-sizing: border-box; width: min(540px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 48px)); padding: 0; border: 1px solid #ffffff25; border-top-color: #cda75a80; border-radius: 18px; background: var(--pack-surface); color: var(--pack-text); box-shadow: 0 24px 100px #000a; overflow: hidden; }
.pack-expansion-dialog[open] { display: flex; flex-direction: column; animation: pack-picker-enter .18s ease-out; }
.pack-expansion-dialog::backdrop { background: #07060bd4; }
.pack-expansion-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 23px 22px 14px; }
.pack-expansion-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; line-height: 1.2; }
.pack-expansion-heading p { margin: 5px 0 0; color: #a69fad; font-size: 12px; }
.pack-expansion-close { flex: 0 0 38px; height: 38px; margin: -6px -7px 0 0; border: 1px solid transparent; border-radius: 9px; color: #c5bfcc; background: transparent; font-size: 25px !important; }
.pack-expansion-close:hover { background: #ffffff0b; color: #fff; }
.pack-expansion-search { flex: 0 0 auto; padding: 0 22px; }
.pack-expansion-search input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid #ffffff24; border-radius: 9px; background: var(--pack-raised); color: var(--pack-text); font-size: 16px; }
.pack-expansion-search input::placeholder { color: var(--pack-muted); }
.pack-expansion-filters { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 13px 22px 16px; border-bottom: 1px solid #ffffff12; }
.pack-expansion-filter { min-height: 40px; padding: 8px 12px; border: 1px solid #ffffff1c; border-radius: 7px; background: transparent; color: var(--pack-muted); font-size: 12px !important; }
.pack-expansion-filter[aria-pressed="true"] { border-color: #b9954e70; color: #edcd88; background: #8d71341f; }
.pack-expansion-results { min-height: 80px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #514753 var(--pack-surface); padding: 0 12px 12px; }
.pack-expansion-group h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 15px 10px 8px; background: var(--pack-surface); color: #a89c8a; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.pack-expansion-option { display: grid; grid-template-columns: 39px minmax(0, 1fr) 22px; align-items: center; gap: 14px; width: 100%; min-height: 79px; padding: 9px 12px; border: 1px solid transparent; border-bottom-color: #ffffff08; border-radius: 9px; text-align: left; background: transparent; color: var(--pack-text); }
.pack-expansion-option:hover, .pack-expansion-option:focus-visible { background: var(--pack-hover); }
.pack-expansion-option[aria-pressed="true"] { background: #29231b; border-color: #cda75a4a; }
.pack-expansion-art { height: 59px; width: 34px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 80%, #d7ad5714, transparent 70%); }
.pack-expansion-art img { display: block; max-width: 100%; max-height: 59px; object-fit: contain; filter: drop-shadow(0 3px 3px #0007); }
.pack-expansion-description { min-width: 0; display: grid; gap: 4px; }
.pack-expansion-description strong { font-size: 13px; line-height: 1.25; }
.pack-expansion-description > span { color: var(--pack-muted); font-size: 12px; }
.pack-expansion-tick { color: #edcd88; font-size: 14px; }
.pack-expansion-status { flex: 0 0 auto; padding: 11px 22px; margin: 0 !important; border-top: 1px solid #ffffff15; color: var(--pack-muted); background: var(--pack-surface); font-size: 12px; }
.pack-expansion-empty { padding: 36px 15px; text-align: center; }
.pack-expansion-empty strong { font-size: 15px; }
.pack-expansion-empty p { color: var(--pack-muted); font-size: 12px; margin: 9px auto 0; max-width: 240px; line-height: 1.6; }
@keyframes pack-picker-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .pack-expansion-dialog { width: 100%; max-height: min(92dvh, 820px); margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .pack-expansion-heading { padding-top: 22px; }
  .pack-expansion-heading::before { content: ''; position: absolute; top: 8px; left: calc(50% - 17px); width: 34px; height: 3px; border-radius: 3px; background: #ffffff25; }
  .pack-expansion-status { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
}
@media (max-height: 650px) {
  .pack-expansion-trigger { min-height: 49px; padding-block: 7px; }
  .pack-expansion-dialog { max-height: 95dvh; }
  .pack-expansion-heading { padding-bottom: 10px; }
  .pack-expansion-filters { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pack-expansion-dialog[open] { animation: none; } }
@media (max-width: 500px) and (max-height: 740px) {
  .pack-binder-style-preview { height: 105px; }
  .pack-binder-style-preview .tcg-binder[data-layout="single"] .binder-book { width: 65px; }
}
@media (max-width: 360px) {
  .pack-selection { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .pack-mobile-cover .pack-cover { width: 62px; }
  .pack-selection h2 { font-size: 20px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .pack-app[data-view="packs"] .pack-catalog > .pack-heading > .pack-muted { display: none; }
}
@media (hover: none) {
  .pack-button:hover:not(:disabled) > .pack-button-arrow { transform: none; }
  .pack-tile:not(.selected):hover .pack-cover { transform: rotate(-3deg); }
  .pack-mini-card:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-button, .pack-button-arrow, .pack-cover, .pack-app :is(.binder-toolbar, .binder-controls) .binder-button { transition: none; }
  .pack-button:hover:not(:disabled) > .pack-button-arrow, .pack-button:active:not(:disabled), .pack-app :is(.binder-toolbar, .binder-controls) .binder-button:active:not(:disabled) { transform: none; }
}
.pack-modeled-rates { margin: 20px 0; padding: 20px; border: 1px solid #cda75a45; border-radius: 10px; background: #211c161f; }
.pack-modeled-rates h2 { margin-bottom: 14px; font-size: 17px; }
.pack-modeled-rates > div + div { border-top: 1px solid #ffffff12; margin-top: 12px; padding-top: 12px; }
.pack-modeled-rates p { font-size: 12px; line-height: 1.6; }
.pack-modeled-rates .pack-button { padding: 8px 0 0; font-size: 12px; }

/* A dedicated control row stays anchored while card names and values change. */
.pack-opening-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 0 4px; border-top: 1px solid var(--pack-line); }
.pack-opening-progress { display: grid; gap: 7px; width: min(240px, 30%); }
.pack-opening-count { color: var(--pack-muted); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1; }
.pack-opening-toolbar .pack-actions { display: flex; flex-wrap: nowrap; gap: 12px; }
.pack-opening-toolbar .pack-opening-next { min-width: 160px; position: relative; }
.pack-opening-toolbar .is-requesting .pack-primary::after { position: absolute; right: 8px; width: 8px; height: 8px; margin: 0; }
.pack-app[data-view="opening"] > .pack-heading { margin-bottom: 2px; }
.pack-app[data-view="opening"] .pack-reveal-details { min-width: 0; max-height: 100%; overflow: auto; overscroll-behavior: contain; }
.pack-settings-button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.pack-experience-settings { width: min(460px, calc(100vw - 28px)); }
.pack-settings-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-block: 24px; cursor: pointer; }
.pack-settings-toggle > span { display: grid; gap: 4px; }
.pack-settings-toggle small, .pack-experience-settings > .pack-muted { color: var(--pack-muted); font-size: 12px; line-height: 1.6; }
.pack-settings-toggle input { width: 20px; height: 20px; accent-color: var(--pack-gold); flex-shrink: 0; }
.pack-settings-volume { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 12px; }
.pack-settings-volume label { font-size: 12px; }
.pack-settings-volume output { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--pack-gold); }
.pack-settings-volume input { grid-column: 1 / -1; width: 100%; accent-color: var(--pack-gold); min-height: 30px; }
.pack-settings-display { border-top: 1px solid var(--pack-line); padding-top: 22px; margin-top: 22px; margin-bottom: 10px; }
.pack-experience-settings .pack-style-save-note { margin-top: 24px; }
.pack-milestones { margin-block: 20px; border-block: 1px solid var(--pack-line); padding: 14px 0; }
.pack-milestones summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.pack-milestones summary::-webkit-details-marker { display: none; }
.pack-milestones summary::after { content: '+'; color: var(--pack-gold); }
.pack-milestones[open] summary::after { content: '−'; }
.pack-milestones summary strong { font-size: 13px; font-weight: 550; }
.pack-milestones summary > span { font-size: 12px; color: var(--pack-muted); margin-left: auto; }
.pack-milestone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 20px; }
.pack-milestone { display: flex; flex-direction: column; min-width: 0; gap: 7px; }
.pack-milestone strong { font-size: 12px; }
.pack-milestone p { font-size: 12px; color: var(--pack-muted); margin: 0 0 6px; flex: 1; }
.pack-milestone progress { width: 100%; height: 4px; accent-color: var(--pack-gold); }
.pack-milestone progress::-webkit-progress-bar { background: #ffffff12; border-radius: 4px; }
.pack-milestone progress::-webkit-progress-value { background: var(--pack-gold); border-radius: 4px; }
.pack-milestone-count, .pack-milestone small, .pack-milestone-note { font-size: 12px; color: var(--pack-muted); }
.pack-milestone[data-earned="true"] strong, .pack-milestone[data-earned="true"] small { color: var(--pack-gold); }
.pack-milestone-note { margin-top: 18px !important; }
/* Light mode avoids creating foil layers and pointer animation in JavaScript. */
.pack-app[data-display-mode="light"] .pack-card-presentation.is-arriving { animation: pack-light-arrive .22s ease-out both; }
.pack-app[data-display-mode="light"] :is(.pack-hit-halo, .pack-hit-burst, .pack-seal-glow) { display: none; }
.pack-app[data-display-mode="light"] :is(.pack-card-face, .pack-tear-wrapper) { filter: none; }
.pack-app[data-display-mode="light"] .binder-pocket::after { display: none; }
@keyframes pack-light-arrive { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .pack-opening-toolbar { gap: 12px; padding-top: 12px; }
  .pack-opening-progress { width: 64px; flex: 0 0 64px; }
  .pack-opening-progress .pack-progress { gap: 2px; }
  .pack-opening-toolbar .pack-actions { gap: 8px; flex: 1; justify-content: flex-end; }
  .pack-opening-toolbar .pack-opening-next { min-width: 0; flex: 1; max-width: 190px; min-height: 46px; font-size: 12px; padding: 10px 14px; }
  .pack-opening-toolbar .pack-text-button { min-height: 46px; font-size: 12px; padding: 8px 4px; }
  .pack-app[data-view="opening"] .pack-reveal-details { max-height: 150px; }
  .pack-app[data-view="opening"] .pack-reveal-details > h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pack-settings-button { min-height: 34px; font-size: 12px; padding-inline: 8px; }
  .pack-milestone-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-height: 500px) {
  .pack-app[data-view="opening"] { min-height: 300px; }
  .pack-app[data-view="opening"] .pack-preferences-status { display: none; }
  .pack-app[data-view="opening"] .pack-reveal-details { max-height: 100%; }
  .pack-opening-toolbar { padding-top: 7px; gap: 12px; }
  .pack-opening-toolbar .pack-opening-next, .pack-opening-toolbar .pack-text-button { min-height: 36px; padding-block: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-app[data-display-mode="light"] .pack-card-presentation.is-arriving { animation: none; }
}

/* A single clear action replaces the tilt/reset toolbar. */
.pack-card-zoom-button { min-height: 32px; padding: 4px 15px; font-size: 12px; margin-top: 6px; }
.pack-app[data-view="opening"] .pack-card-stage > .pack-card-zoom-button { position: absolute; bottom: 0; margin: 0; }
.pack-app[data-view="opening"] .pack-card-stage > .pack-tilt-hint { bottom: 34px; }
body.pack-zoom-open { overflow: hidden; }
.pack-card-zoom {
  box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0;
  padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: #0c0c0ff5; color: #f3f2f4; overflow: hidden;
}
.pack-card-zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.pack-card-zoom::backdrop { background: #070709ed; }
.pack-zoom-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1100px, 100%); margin: 0 auto; }
.pack-zoom-header > div { min-width: 0; }
.pack-zoom-header h2 { font-size: clamp(18px, 2vw, 25px); margin: 0 0 4px; letter-spacing: -.025em; }
.pack-zoom-header .pack-muted { font-size: 12px; margin: 0; }
.pack-zoom-close { flex-shrink: 0; min-height: 44px; padding: 9px 17px; border-radius: 22px; }
/* Explicit scope wins over the compact opening-view card sizing. */
.pack-app .pack-card-zoom .pack-card-stage {
  container-type: size; min-height: 0; height: auto; width: 100%; padding: 18px 10px 32px;
  background: radial-gradient(ellipse, #e4d5a307, transparent 66%);
}
.pack-app .pack-card-zoom .pack-card-presentation {
  width: min(calc(100cqw - 28px), calc((100cqh - 16px) * var(--card-ratio, .716)), 1000px);
  height: auto; max-width: none; max-height: none; margin: 0; animation: none;
}
.pack-app .pack-card-zoom .pack-card-face.large { height: auto; }
.pack-app .pack-card-zoom .pack-tilt-plane { height: auto; }
.pack-app .pack-card-zoom .pack-tilt-hint { position: absolute; bottom: 0; margin: 0 !important; font-size: 12px; }
.pack-card-zoom .pack-flip-back { display: none; }
@media (max-width: 700px), (max-height: 500px) {
  .pack-app[data-view="opening"] .pack-card-stage { padding-bottom: 32px; }
  .pack-app[data-view="opening"] .pack-card-stage > .pack-tilt-hint { display: none; }
  .pack-app .pack-card-zoom .pack-card-stage { padding: 12px 0 26px; }
  .pack-app .pack-card-zoom .pack-card-stage > .pack-tilt-hint { display: block; }
  .pack-card-zoom { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .pack-zoom-header { gap: 10px; }
  .pack-zoom-header h2 { font-size: 18px; }
  .pack-zoom-header .pack-muted { font-size: 12px; }
}

/* Shared controls: the gold action and readable neutral surfaces carry the hierarchy. */
.pack-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; pointer-events: none; }
.pack-button:not(.pack-tile, .pack-mini-card, .pack-history-row, .pack-binder-swatch) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.3; }
.pack-button-arrow { display: inline-flex; align-items: center; margin-left: 0; }
.pack-selection .pack-primary > .pack-button-arrow { padding-left: 0; border: 0; margin-left: 8px; }
.pack-button > .pack-button-label { min-width: 0; }
.pack-button:is(.pack-small, .pack-settings-button) { min-height: 40px; font-size: 13px; }
.pack-button.pack-text-button { min-height: 40px; }
.pack-button.pack-tab { border-radius: 0; min-height: 44px; font-size: 14px; }
.pack-button.pack-chip { min-height: 36px; border-radius: 999px; font-size: 12px; }
.pack-button.pack-favorite { min-width: 44px; min-height: 44px; padding: 10px; border-radius: 11px; }
.pack-favorite .pack-icon { width: 20px; height: 20px; flex-basis: 20px; }
.pack-favorite[aria-pressed="true"] .pack-icon { fill: #f3c65c26; }
.pack-button:disabled { opacity: .55; }
.pack-button:not(:disabled):focus-visible, .pack-expansion-option:focus-visible { outline: 2px solid var(--pack-gold); outline-offset: 3px; }
.pack-primary:hover:not(:disabled) { background: linear-gradient(180deg, #f7d789, #f3c65c); }
.pack-zoom-close, .pack-dialog-close { border-radius: 11px; min-height: 44px; min-width: 44px; }
.pack-dialog-close { width: 44px; height: 44px; }
.pack-view-switch { border-radius: 13px; }
.pack-view-option { border-radius: 9px; min-height: 40px; }
.pack-header { min-height: 78px; gap: 18px; }
.pack-header-meta { gap: 12px; }
.pack-test-badge { font-size: 10px; color: var(--pack-muted); border-color: var(--pack-line); letter-spacing: .04em; }
.pack-player-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pack-player-meta .pack-player { margin: 0; max-width: 120px; font-size: 13px; }
.pack-save-state { display: inline-flex; align-items: center; gap: 5px; color: var(--pack-muted); font-size: 12px; white-space: nowrap; }
.pack-save-state .pack-icon { width: 14px; height: 14px; flex-basis: 14px; }
.pack-save-state[data-state="error"] { color: #edb59c; }
.pack-preferences-status:empty { display: none; }
.pack-tabs { margin-bottom: 24px; }
.pack-tabs .active { color: var(--pack-text); }
.pack-footer { letter-spacing: .035em; }
.pack-selection .pack-kicker, .pack-tile-series { color: var(--pack-muted); }
.pack-tile.selected { background: #f3c65c08; border-color: #f3c65c66; box-shadow: none; }
.pack-tile.selected::after { color: var(--pack-gold); background: var(--pack-surface); }
.pack-tile-name { font-size: 14px; }
.pack-card-value { color: #d0d4dc; font-size: 24px; }
.pack-reveal-details .pack-kicker { color: var(--pack-gold); letter-spacing: .035em; }
.pack-finish { border-radius: 6px; color: var(--pack-muted); }
.pack-new-badge, .pack-copy-count { font-size: 11px; padding: 3px 6px; }
.pack-copy-count { background: #20242beF; color: #f1f2f4; border: 1px solid #ffffff30; }
.pack-mini-card > strong { font-size: 13px; }
.pack-mini-card > .pack-muted, .pack-mini-value { font-size: 12px; }
.pack-mini-value { color: #c4c9d2; }
.pack-collection-heading { margin-bottom: 16px; gap: 16px; }
.pack-collection-summary { min-width: 0; }
.pack-collection-summary > strong { font-size: 15px; font-weight: 600; color: var(--pack-text); }
.pack-collection-summary > h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }
.pack-collection-summary > p { color: var(--pack-muted); font-size: 12px; margin-top: 4px; }
.pack-binder-toolbar { gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--pack-line); margin-bottom: 8px; }
.pack-binder-progress-copy { min-width: 0; gap: 3px; }
.pack-binder-progress-copy strong { color: var(--pack-text); font-size: 14px; }
.pack-binder-progress-copy :is(span, small) { color: var(--pack-muted); font-size: 12px; line-height: 1.4; }
.pack-binder-progress-copy small { max-width: 320px; }
.pack-binder-progress-copy progress { height: 4px; margin-top: 3px; }
.pack-binder-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pack-binder-actions .pack-button { min-height: 44px; padding: 8px 12px; }
.pack-binder-explainer { font-size: 12px; line-height: 1.6; color: var(--pack-muted); max-width: 800px; }
.pack-app .binder-toolbar .binder-eyebrow { color: var(--pack-muted); }
.pack-binder-customizer { background: var(--pack-surface); border-color: #ffffff26; }
.pack-binder-customizer:not(.pack-checklist-dialog) .pack-dialog-actions { background: var(--pack-surface); gap: 8px; }
.pack-binder-customizer .pack-dialog-actions .pack-button { min-height: 44px; font-size: 13px; }
.pack-select-field > span { font-size: 12px; letter-spacing: 0; }
.pack-style-save-note { font-size: 12px; }
.pack-binder-swatch { width: 42px; height: 42px; }
.pack-binder-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pack-gold); }
.pack-settings-language { margin-top: 20px; }
.pack-expansion-dialog { background: var(--pack-surface); color: var(--pack-text); }
.pack-expansion-heading > p, .pack-expansion-status, .pack-expansion-description > span { color: var(--pack-muted); font-size: 12px; }
.pack-expansion-filter { min-height: 40px; font-size: 12px !important; border-radius: 999px; }
.pack-expansion-group h3 { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--pack-muted); background: var(--pack-surface); }
.pack-expansion-description strong { font-size: 14px; }
.pack-expansion-option[aria-pressed="true"] { background: #f3c65c0a; border-color: #f3c65c66; }
.pack-expansion-close { min-width: 44px; min-height: 44px; border-radius: 11px; }
.pack-opening-toolbar .pack-opening-next { min-height: 46px; padding-right: 26px; }
.pack-app[data-view="opening"] .pack-reveal > .pack-card-stage { padding-bottom: 64px; }
.pack-app[data-view="opening"] .pack-reveal > .pack-card-stage > .pack-tilt-hint { bottom: 44px; }
.pack-app[data-view="opening"] .pack-reveal > .pack-card-stage > .pack-card-zoom-button { min-height: 40px; }
.pack-opening-toolbar .pack-text-button { min-height: 44px; }
.pack-actions.is-requesting .pack-primary > .pack-button-arrow { visibility: hidden; }
.pack-actions.is-requesting .pack-primary::after { margin: 0; }
.pack-app .pack-card-zoom .pack-tilt-hint { font-size: 12px; color: var(--pack-muted); }
@media (max-width: 700px) {
  .pack-brand { flex-shrink: 0; }
  .pack-brand span { display: none; }
  .pack-brand strong { font-size: 16px; }
  .pack-header-meta { gap: 7px; }
  .pack-player-meta { gap: 5px; }
  .pack-player-meta .pack-player { display: none; }
  .pack-save-state { font-size: 11px; }
  .pack-header .pack-test-badge { display: none; }
  .pack-button.pack-tab { font-size: 13px; }
  .pack-tabs { justify-content: space-between; gap: 12px; }
  .pack-button:is(.pack-settings-button, .pack-small) { min-height: 44px; }
  .pack-header .pack-settings-button { padding: 8px; font-size: 12px; }
  .pack-collection-heading { gap: 12px; margin-bottom: 12px; align-items: flex-start; }
  .pack-collection-summary > strong { font-size: 14px; }
  .pack-collection-summary > h1 { font-size: 19px; }
  .pack-collection-summary > p { font-size: 12px; line-height: 1.45; }
  .pack-view-switch { flex-shrink: 0; }
  .pack-view-option { font-size: 12px; padding: 8px 10px; min-height: 40px; }
  .pack-binder-toolbar { gap: 10px; }
  .pack-binder-toolbar select { min-height: 44px; }
  .pack-binder-progress-copy small { max-width: 230px; }
  .pack-app[data-view="collection"] .pack-binder-style-button { min-height: 44px; font-size: 12px; padding: 8px 10px; }
  .pack-app[data-view="collection"] .binder-cover-action { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  .pack-app[data-view="collection"] .binder-toolbar { align-items: flex-start; gap: 10px; }
  .pack-binder-actions { gap: 6px; }
  .pack-app[data-view="opening"] .pack-reveal-details > h2 { font-size: 23px; }
  .pack-app[data-view="opening"] .pack-card-value { font-size: 18px; }
  .pack-app[data-view="opening"] .pack-reveal-details > .pack-kicker { font-size: 11px; }
  .pack-app[data-view="opening"] .pack-price-note { font-size: 11px; line-height: 1.35; }
  .pack-app[data-view="opening"] .pack-reveal > .pack-card-stage { padding-bottom: 44px; }
  .pack-opening-toolbar .pack-actions { gap: 6px; }
  .pack-opening-toolbar .pack-opening-next { font-size: 13px; }
  .pack-opening-toolbar .pack-text-button { font-size: 12px; }
  .pack-binder-customizer .pack-dialog-actions { flex-wrap: wrap; }
}
@media (max-width: 370px) {
  .pack-header .pack-settings-button .pack-icon { display: block; }
  .pack-header .pack-settings-button .pack-button-label { display: none; }
  .pack-header .pack-settings-button { min-width: 44px; }
  .pack-collection-heading { flex-wrap: wrap; }
  .pack-collection-heading .pack-view-switch { width: 100%; }
  .pack-view-option { flex: 1; }
  .pack-tabs { gap: 8px; }
  .pack-button.pack-tab { font-size: 12px; }
  .pack-opening-progress { width: 42px; flex-basis: 42px; }
  .pack-opening-toolbar { gap: 8px; }
  .pack-opening-toolbar .pack-opening-next { font-size: 12px; gap: 4px; padding-inline: 10px; }
  .pack-opening-next .pack-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-button:active:not(:disabled) { transform: none; }
}

/* Collector actions stay grouped beside the pack or collection they affect. */
.pack-selection > .collector-wishlist { width: 100%; grid-column: 1 / -1; border-top: 1px solid var(--pack-line); padding-top: 18px; margin-top: 20px; }
.pack-selection > .progression-panel.is-compact { grid-column: 1 / -1; width: 100%; min-width: 0; }
.pack-collector-recap { padding: 20px; margin: 0 0 24px; border: 1px solid #f3c65c33; border-radius: 14px; background: #f3c65c05; }
.pack-collector-recap h2 { font-size: 18px; margin-bottom: 8px; }
.pack-collector-recap p { font-size: 14px; line-height: 1.6; }
.pack-collector-recap progress { display: block; width: 100%; height: 5px; accent-color: var(--pack-gold); margin: 14px 0 8px; }
.pack-collector-recap .pack-button { margin: 10px 8px 0 0; }
.pack-wishlist-hit { color: var(--pack-gold); }
.pack-duplicate-rewards { margin-top: 24px; }
.pack-app[data-view="collection"] .pack-view-switch { flex-wrap: wrap; }
.pack-app[data-view="collection"] .pack-view-option { min-width: 64px; }
@media (max-width: 700px) {
  .pack-app[data-view="collection"] .pack-collection-heading { flex-wrap: wrap; }
  .pack-app[data-view="collection"] .pack-view-switch { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pack-app[data-view="collection"] .pack-view-option { min-width: 0; min-height: 44px; font-size: 12px; padding: 8px 3px; }
  .pack-selection > .collector-wishlist { margin-top: 12px; }
  .pack-collector-recap { padding: 15px; }
  .pack-collector-recap p { font-size: 13px; }
}
@media (max-width: 370px) {
  .pack-app[data-view="collection"] .pack-view-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep the current collecting task close to its cards. Gold signals the next
   primary action; supporting tools use the same quiet, tactile control shape. */
.pack-app { --pack-radius: 10px; }
.pack-button:not(.pack-primary, .pack-tab, .pack-chip, .pack-tile, .pack-mini-card, .pack-history-row, .pack-view-option, .pack-binder-swatch, .pack-favorite, .pack-text-button) { background: #252b34; border-color: #626b7c; }
.pack-button:not(.pack-primary, .pack-tab, .pack-chip, .pack-tile, .pack-mini-card, .pack-history-row, .pack-view-option, .pack-binder-swatch, .pack-favorite, .pack-text-button):hover:not(:disabled) { background: #323a46; border-color: #9199a8; }
.pack-text-button:hover:not(:disabled) { color: var(--pack-text); }
.pack-small { min-height: 44px; }
.pack-view-switch { border-radius: 11px; }
.pack-view-option { min-height: 44px; border-radius: 8px; }
.pack-view-option[aria-pressed="true"] { color: var(--pack-text); }
.pack-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 22px 24px; margin: 0 0 28px; border: 1px solid #ffffff1e; border-radius: 13px; background: #15181d; }
.pack-journey-copy { min-width: 0; }
.pack-journey-copy .pack-kicker { margin-bottom: 5px; }
.pack-journey-copy h2 { font-size: clamp(19px, 2.5vw, 25px); letter-spacing: -.025em; margin-bottom: 6px; }
.pack-journey-copy p { max-width: 62ch; color: var(--pack-muted); font-size: 13px; line-height: 1.55; }
.pack-journey > .pack-actions { grid-column: 1 / -1; gap: 8px; }
.pack-journey-cards { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.pack-journey-cards > button { display: grid; place-items: center; width: 57px; min-width: 0; aspect-ratio: 245 / 342; padding: 0; border: 1px solid #ffffff30; border-radius: 5px; overflow: hidden; background: #20242b; color: var(--pack-muted); }
.pack-journey-cards > button:hover:not(:disabled) { border-color: #ffffff70; }
.pack-journey-cards img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pack-journey-cards .pack-image { width: 100%; height: 100%; }
.pack-journey-cards .pack-image-fallback { font-size: 10px; padding: 4px; }
.pack-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; margin: 0 0 16px; color: var(--pack-muted); font-size: 13px; }
.pack-breadcrumb .pack-button { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--pack-muted); font-size: inherit; }
.pack-breadcrumb .pack-button:hover:not(:disabled) { color: var(--pack-text); background: transparent; }
.pack-breadcrumb [aria-current="page"] { color: var(--pack-text); overflow-wrap: anywhere; }
.pack-result-hero { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); align-items: center; gap: 28px; padding: 26px 0 28px; border-bottom: 1px solid var(--pack-line); margin: 0 0 22px; }
.pack-result-art { width: 100%; min-width: 0; }
.pack-result-art .pack-mini-card { width: 100%; }
.pack-result-art .pack-mini-art { margin: 0; }
.pack-result-art .pack-mini-card > :is(strong, .pack-muted, .pack-mini-value) { display: none; }
.pack-result-copy { min-width: 0; }
.pack-result-copy > .pack-kicker { margin-bottom: 6px; }
.pack-result-copy h2 { font-size: clamp(22px, 3.5vw, 34px); margin: 0 0 8px; overflow-wrap: anywhere; }
.pack-result-copy p { font-size: 14px; color: var(--pack-muted); line-height: 1.65; }
.pack-result-copy .pack-status-badge { margin: 10px 6px 0 0; }
.pack-result-actions { gap: 8px; margin: 18px 0; }
.pack-result-actions .pack-primary { margin-left: auto; }
.pack-result-all { margin: 20px 0; border-block: 1px solid var(--pack-line); }
.pack-result-all > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 12px 2px; color: var(--pack-text); cursor: pointer; list-style: none; font-size: 13px; }
.pack-result-all > summary::-webkit-details-marker { display: none; }
.pack-result-all > summary::after { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pack-result-all[open] > summary::after { transform: rotate(225deg); }
.pack-result-all > summary:hover { color: #fff; }
.pack-result-all > summary:focus-visible { outline: 2px solid var(--pack-gold); outline-offset: 3px; border-radius: 5px; }
.pack-result-all .pack-card-grid { margin: 12px 0 24px; }
.pack-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #ffffff24; border-radius: 5px; color: #b9c1cd; background: #20242b; font-size: 11px; line-height: 1.5; font-weight: 550; }
.pack-status-badge[data-kind="new"] { color: #c7dfc9; background: #8db89612; border-color: #8db89640; }
.pack-status-badge[data-kind="wish"] { color: #f0d794; background: #f3c65c0b; border-color: #f3c65c40; }
.pack-status-badge[data-kind="duplicate"] { color: #b5bdc9; }
@media (max-width: 700px) {
  .pack-journey { gap: 12px; margin-bottom: 22px; padding: 16px; }
  .pack-journey-copy h2 { font-size: 19px; }
  .pack-journey-copy p { font-size: 12px; }
  .pack-journey-cards { gap: 4px; max-width: 98px; flex-wrap: wrap; }
  .pack-journey-cards > button { width: 43px; }
  .pack-journey-cards > button:nth-child(n+3) { display: none; }
  .pack-journey > .pack-actions .pack-button { font-size: 12px; padding-inline: 11px; }
  .pack-breadcrumb { margin-bottom: 10px; font-size: 12px; }
  .pack-result-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 17px; padding: 18px 0 22px; }
  .pack-result-copy h2 { font-size: 22px; }
  .pack-result-copy p { font-size: 13px; line-height: 1.5; }
  .pack-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-result-actions .pack-button { min-width: 0; font-size: 12px; padding-inline: 9px; }
  .pack-result-actions .pack-primary { margin-left: 0; grid-column: 1 / -1; }
}
@media (max-width: 370px) {
  .pack-journey { padding: 14px; gap: 10px; }
  .pack-journey-cards { max-width: 42px; }
  .pack-journey-cards > button { width: 40px; }
  .pack-journey-cards > button:nth-child(n+2) { display: none; }
  .pack-result-hero { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; }
  .pack-result-copy h2 { font-size: 20px; }
}
@media (max-width: 700px), (max-height: 500px) {
  .pack-selection > .collector-wishlist.is-compact { padding: 14px; margin-top: 4px; }
  .pack-selection > .collector-wishlist.is-compact h2 { font-size: 17px; line-height: 1.3; }
  .pack-selection > .collector-wishlist.is-compact .collector-section-heading { gap: 4px 10px; }
  .pack-selection > .collector-wishlist.is-compact .collector-text-button { min-height: 44px; padding-inline: 0; font-size: 12px; text-align: left; }
  .pack-selection > .collector-wishlist.is-compact .collector-chase-cards { margin-top: 12px; }
}

/* Utility actions need a recognizable control even before hover. Keep links
   quiet, but give navigation, collection actions and exits a clear silhouette. */
.pack-app .pack-text-button { color: #d4d9e2; }
.pack-app.is-calm .pack-settings-button,
.pack-app .pack-collection-heading-actions > .pack-text-button,
.pack-app .pack-result-actions > .pack-text-button {
  min-height: 44px; padding: 10px 13px; border: 1px solid #626b7c;
  background: #252b34; color: #f1f2f4; border-radius: 10px;
}
.pack-app.is-calm .pack-settings-button { min-width: 44px; padding: 10px; }
.pack-app .pack-options-trigger { color: #e2e6ed; border: 1px solid #626b7c; background: #20252d; padding-inline: 12px; }
.pack-app .pack-options-trigger:hover, .pack-app .pack-options[open] > .pack-options-trigger { background: #323a46; border-color: #9199a8; }
.pack-app.is-calm .pack-view-option { border: 1px solid #626b7c; color: #d4d9e2; background: #20252d; }
.pack-app.is-calm .pack-view-option[aria-pressed="true"] { color: #f7d784; border-color: #d1ac50; background: #f3c65c16; box-shadow: inset 0 -2px 0 #f3c65c; }
.pack-app :is(.pack-zoom-close, .pack-dialog-close) { color: #f7d784; background: #2d281d; border: 1px solid #b3944c; min-width: 44px; min-height: 44px; }
.pack-app :is(.pack-zoom-close, .pack-dialog-close):hover:not(:disabled) { color: #ffe2a0; background: #403621; border-color: #e8c775; }
.pack-app.is-calm .pack-settings-button:hover:not(:disabled),
.pack-app .pack-collection-heading-actions > .pack-text-button:hover:not(:disabled),
.pack-app .pack-result-actions > .pack-text-button:hover:not(:disabled) { color: #fff; background: #323a46; border-color: #9199a8; }
@media (forced-colors: active) {
  .pack-app :is(.pack-button, .pack-options-trigger) { border-color: ButtonText; }
  .pack-app .pack-view-option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* Settings use a stable frame; only the controls scroll on small screens. */
.pack-experience-settings { width: min(580px, calc(100vw - 28px)); max-height: min(800px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border-color: #d9bb7b3d; border-radius: 20px; background: #15171c; }
.pack-experience-settings[open] { display: flex; flex-direction: column; }
.pack-experience-settings > .pack-dialog-heading { flex: 0 0 auto; padding: 18px 24px; border-bottom: 1px solid #ffffff13; background: linear-gradient(100deg, #d9b9740c, transparent 65%), #191b20; }
.pack-experience-settings .pack-dialog-heading h2 { font-size: 22px; letter-spacing: -.025em; }
.pack-settings-body { display: grid; gap: 22px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px 24px; }
.pack-settings-section { display: block; min-width: 0; padding: 0; margin: 0; border: 0; }
.pack-settings-section > legend { padding: 0; margin-bottom: 12px; color: #e5d7b5; font-size: 13px; font-weight: 650; }
.pack-settings-toggle { margin: 0; padding: 15px 16px; border: 1px solid #ffffff17; border-radius: 12px 12px 0 0; background: #ffffff03; }
.pack-settings-toggle > span { gap: 4px; }
.pack-settings-toggle strong { font-size: 14px; font-weight: 600; }
.pack-settings-toggle small { font-size: 12px; line-height: 1.5; color: #afb0b8; }
.pack-app .pack-experience-settings .pack-settings-switch { appearance: none; position: relative; width: 44px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 1px solid #ffffff35; border-radius: 999px; background: #363941; box-shadow: inset 0 1px 3px #0003; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pack-settings-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c5c6cb; box-shadow: 0 1px 3px #0004; transition: transform .15s; }
.pack-app .pack-experience-settings .pack-settings-switch:checked { background: #e9bf60; border-color: #f6d88c; }
.pack-settings-switch:checked::before { transform: translateX(16px); background: #332916; }
.pack-settings-audio-controls { display: flex; align-items: center; gap: 22px; padding: 12px 16px 10px; border: 1px solid #ffffff17; border-top: 0; border-radius: 0 0 12px 12px; background: #101216; }
.pack-settings-volume { flex: 1; min-width: 0; gap: 0 12px; margin: 0; }
.pack-settings-volume label { color: #c0c1c8; font-size: 12px; }
.pack-settings-volume output { font-size: 12px; color: #e5ca8b; }
.pack-settings-volume input { display: block; min-height: 38px; margin: 0; padding: 0; accent-color: #e9bf60; box-shadow: none; cursor: pointer; }
.pack-settings-volume input:disabled { opacity: .35; cursor: default; }
.pack-settings-listen { flex: 0 0 auto; }
.pack-settings-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pack-settings-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.pack-settings-choice > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pack-settings-choice-content { display: grid; align-content: start; gap: 5px; height: 100%; min-height: 48px; padding: 13px 35px 13px 14px; border: 1px solid #ffffff24; border-radius: 12px; background: #1c1f25; transition: border-color .15s, background-color .15s; }
.pack-settings-choice-content > strong { font-size: 13px; line-height: 1.4; font-weight: 600; color: #dedee3; }
.pack-settings-choice-content > small { font-size: 12px; line-height: 1.5; color: #afb0b8; }
.pack-settings-choice:hover .pack-settings-choice-content { border-color: #ffffff4a; background: #23262c; }
.pack-settings-choice > input:checked + .pack-settings-choice-content { border-color: #cfa954; background: #bc984b10; box-shadow: inset 0 0 0 1px #cfa95412; }
.pack-settings-choice > input:checked + .pack-settings-choice-content > strong { color: #f2d68e; }
.pack-settings-choice > input:focus-visible + .pack-settings-choice-content { outline: 2px solid var(--pack-gold); outline-offset: 3px; }
.pack-settings-choice-check { position: absolute; right: 13px; top: 14px; width: 16px; height: 16px; opacity: 0; color: #f2d68e; }
.pack-settings-choice > input:checked + .pack-settings-choice-content > .pack-settings-choice-check { opacity: 1; }
.pack-settings-display-preview { position: relative; width: 28px; height: 37px; margin-bottom: 7px; border: 1px solid #b9af9766; border-radius: 3px; background: linear-gradient(145deg, #e3d3a92b, #818d9550 45%, #9985af52 60%, #e3bb674a), #2b3038; box-shadow: 3px 2px 0 #ffffff0b; }
.pack-settings-display-preview::after { content: ''; position: absolute; inset: 4px 4px 12px; border: 1px solid #ffffff26; border-radius: 1px; background: #ffffff0c; }
.pack-settings-display-preview[data-mode="light"] { border-color: #a4a7af55; background: #343840; box-shadow: 3px 2px 0 #ffffff08; }
.pack-settings-body .pack-settings-help { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: #9fa1ab; }
.pack-settings-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 16px 24px; border-top: 1px solid #ffffff16; background: #191b20; }
.pack-experience-settings .pack-settings-footer .pack-style-save-note { margin: 0; max-width: 320px; font-size: 11px; line-height: 1.5; }
.pack-settings-footer > .pack-primary { flex: 0 0 auto; min-width: 100px; }
@media (max-width: 500px) {
  .pack-experience-settings { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .pack-experience-settings > .pack-dialog-heading { padding: 12px 16px; }
  .pack-settings-body { padding: 18px 16px; gap: 20px; }
  .pack-settings-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 12px; }
  .pack-settings-footer > .pack-primary { min-width: 84px; }
  .pack-settings-toggle { padding: 13px 12px; gap: 12px; }
  .pack-settings-audio-controls { padding-inline: 12px; gap: 12px; }
  .pack-settings-choice-content { padding-left: 12px; padding-right: 29px; }
  .pack-settings-choice-check { right: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-settings-switch, .pack-settings-switch::before, .pack-settings-choice-content { transition: none; }
}
@media (forced-colors: active) {
  .pack-app .pack-experience-settings .pack-settings-switch { appearance: auto; }
  .pack-settings-switch::before { display: none; }
  .pack-settings-choice > input:checked + .pack-settings-choice-content { outline: 2px solid Highlight; outline-offset: -3px; }
  .pack-settings-choice-check { color: Highlight; }
}