.social-page { max-width: 1320px; margin: 90px auto 60px; padding: 24px; color: #25252d; }
.social-hero { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.social-hero > span, .social-kicker { display: inline-block; padding: 5px 10px; background: #25252d; color: #fff; font-weight: 900; letter-spacing: .1em; transform: rotate(-2deg); }
.social-hero h1 { margin: 18px 0 8px; font-size: clamp(2.5rem, 7vw, 5rem); line-height: .95; }
.social-hero p { font-weight: 650; }
.activity-feed { max-width: 920px; margin: 0 auto 44px; padding: 22px; border: 3px solid #25252d; border-radius: 14px; background: #fff3bc; box-shadow: 6px 6px 0 #25252d; }
.activity-feed > header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.activity-feed h2, .activity-feed header p { margin: 0; }
.activity-feed header p { margin-top: 3px; opacity: .7; font-size: .82rem; font-weight: 700; }
.activity-feed ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.activity-feed li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 2px solid #25252d; border-radius: 8px; background: #fff; font-weight: 700; }
.activity-feed li a { color: #5d2bb8; font-weight: 950; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.activity-feed time { flex: none; opacity: .55; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.profile-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.profile-directory-card { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 17px; border: 3px solid #25252d; border-radius: 14px; background: #fff; color: #25252d; text-decoration: none; box-shadow: 6px 6px 0 #25252d; transition: transform .15s, box-shadow .15s; }
.profile-directory-card:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 #25252d; }
.profile-directory-card > strong { grid-column: 2; font-size: .8rem; }
.profile-directory-card h2 { margin: 0 0 5px; font-size: 1.15rem; }
.profile-directory-card h2 em { padding: 2px 5px; background: #ffd166; font-size: .6rem; font-style: normal; }
.profile-directory-card h2 .visibility-public { background: #75d69c; }
.profile-directory-card h2 .visibility-private { background: #ff8f8f; }
.profile-directory-card p { margin: 0; opacity: .7; font-size: .8rem; }
.profile-directory-avatar, .profile-avatar-public { overflow: hidden; display: grid; place-items: center; border: 3px solid #25252d; border-radius: 50%; background: #f4eaff; font-weight: 1000; }
.profile-directory-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
.profile-directory-avatar img, .profile-avatar-public img { width: 100%; height: 100%; object-fit: cover; }
.public-profile-header { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px; border: 4px solid #25252d; border-radius: 18px; background: linear-gradient(135deg, #fff, #fff3bc); box-shadow: 8px 8px 0 #25252d; }
.profile-avatar-public { width: 125px; height: 125px; font-size: 3rem; }
.public-profile-header h1 { margin: 14px 0 6px; font-size: clamp(2rem, 5vw, 4rem); line-height: .95; }
.public-profile-header p { margin: 0; }
.public-profile-header button, .trade-composer button, .trade-filters button, .trade-list-item footer button, .inspector-trade-button { padding: 10px 14px; border: 3px solid #25252d; border-radius: 8px; background: #ffd166; box-shadow: 3px 3px 0 #25252d; color: #25252d; font-weight: 900; cursor: pointer; }
.profile-header-actions { display: grid; gap: 10px; justify-items: end; }
.profile-header-actions button[hidden] { display: none; }
#blockCollectorButton[aria-pressed="true"] { background: #ffadad; }
.report-dialog { max-width: 460px; padding: 22px; border: 3px solid #25252d; border-radius: 12px; box-shadow: 6px 6px 0 #25252d; }
.report-dialog::backdrop { background: rgba(37, 37, 45, .5); }
.report-dialog form { display: grid; gap: 8px; }
.report-dialog h2 { font-size: 1.3rem; font-weight: 1000; }
.report-dialog p { color: #4a4458; font-weight: 700; }
.report-dialog label { font-size: .72rem; font-weight: 1000; text-transform: uppercase; }
.report-dialog select, .report-dialog textarea { padding: 9px 10px; border: 3px solid #25252d; border-radius: 8px; font: inherit; font-weight: 700; }
.report-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.report-dialog-actions button { padding: 9px 16px; border: 3px solid #25252d; border-radius: 8px; background: #fff; font: inherit; font-weight: 1000; cursor: pointer; box-shadow: 3px 3px 0 #25252d; }
#reportSubmit { background: #ffd6a5; }
#closeAccountSubmit { background: #ffadad; }
.report-dialog input[type="text"] { padding: 9px 10px; border: 3px solid #25252d; border-radius: 8px; font: inherit; font-weight: 700; }
.account-data { display: grid; gap: 8px; margin: 26px 0; padding: 18px 20px; border: 3px solid #25252d; border-radius: 12px; background: #fff; box-shadow: 5px 5px 0 #25252d; }
.account-data h2 { font-size: 1.2rem; font-weight: 1000; }
.account-data p { color: #4a4458; font-weight: 700; }
.account-data-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.account-data-actions a, .account-data-actions button { padding: 9px 16px; border: 3px solid #25252d; border-radius: 8px; background: #fff; color: #25252d; font: inherit; font-weight: 1000; text-decoration: none; cursor: pointer; box-shadow: 3px 3px 0 #25252d; }
#closeAccountButton { background: #ffadad; }
.profile-effects { display: grid; gap: 6px; }
.profile-effects-label { font-size: .72rem; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.profile-effect-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-effect-choice { padding: 7px 13px; border: 3px solid #25252d; border-radius: 999px; background: #fff; font: inherit; font-size: .78rem; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 #25252d; }
.profile-effect-choice.is-worn { background: #ffd6a5; }
.profile-effect-choice:disabled { cursor: progress; opacity: .6; }


.report-dialog-actions button:disabled { cursor: progress; opacity: .6; }

.profile-visibility-toggle { display: flex; gap: 8px; align-items: center; font-size: .8rem; font-weight: 900; cursor: pointer; }
.profile-visibility-toggle[hidden] { display: none; }
.profile-visibility-toggle input { width: 20px; height: 20px; accent-color: #25252d; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.profile-stat-grid article { padding: 18px; border: 3px solid #25252d; border-radius: 11px; background: #fff; text-align: center; box-shadow: 4px 4px 0 #25252d; }
.profile-stat-grid strong, .profile-stat-grid span { display: block; }
.profile-stat-grid strong { font-size: 2rem; }
.profile-stat-grid span { margin-top: 4px; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.profile-showcase { position: relative; overflow: hidden; margin: 24px 0 30px; padding: 22px 26px 28px; border: 3px solid #25252d; border-radius: 14px; background: linear-gradient(135deg, #fff 35%, #f7f1ff); box-shadow: 6px 6px 0 #25252d; }
.profile-showcase::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, #8d55ef, #ff6f9e, #ffd166); }
.profile-showcase > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 3px 0 24px; }
.profile-showcase h2 { margin: 10px 0 3px; font-size: 1.75rem; }
.profile-showcase > header p { margin: 0; opacity: .65; font-size: .85rem; font-weight: 750; }
.profile-showcase button { padding: 9px 13px; border: 2px solid #25252d; border-radius: 8px; background: #f4eaff; box-shadow: 2px 2px 0 #25252d; color: #25252d; font-weight: 900; cursor: pointer; }
.profile-showcase-content { display: flex; align-items: start; gap: 32px; }
.profile-showcase-grid { flex: 1; min-width: 0; max-width: none; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-self: center; align-items: start; }
.profile-showcase .collection-card-button { display: block; width: min(100%, var(--showcase-card-width, 265px)); flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: inherit; }
.collection-card-button { text-decoration: none; color: inherit; }
.profile-showcase > .social-empty { padding: 18px; border: 2px dashed #aaa0b9; border-radius: 9px; background: rgba(255,255,255,.75); }
.profile-showcase [hidden] { display: none; }
.showcase-editor { position: fixed; inset: 0; z-index: 21000; display: grid; place-items: center; overflow: auto; padding: 24px; background: rgba(25, 22, 34, .72); backdrop-filter: blur(8px); }
.showcase-editor-panel { width: min(920px, 100%); max-height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column; gap: 16px; overflow: hidden; padding: 24px; border: 3px solid #25252d; border-radius: 14px; background: #fff; box-shadow: 10px 10px 0 #25252d; }
.showcase-fridge-setting { display: flex; align-items: center; gap: 10px; }
.showcase-items-settings { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.showcase-items-settings legend { padding: 0; margin-bottom: 8px; font-weight: 800; }
.showcase-editor-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.showcase-editor-panel h3 { margin: 10px 0 3px; font-size: 1.65rem; }
.showcase-editor-panel header p { margin: 0; opacity: .65; font-weight: 750; }
.profile-showcase .showcase-editor-close { padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 2rem; line-height: 1; }
.showcase-options { min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; overflow-y: auto; margin: 20px 0; padding: 2px 8px 4px 2px; }
.showcase-option { display: grid; grid-template-columns: auto 46px 1fr; gap: 9px; align-items: center; padding: 8px; border: 2px solid #d6d1dc; border-radius: 9px; background: #fff; cursor: pointer; }
.showcase-option:has(input:checked) { border-color: #25252d; background: #f4eaff; box-shadow: 2px 2px 0 #25252d; }
.showcase-option:has(input:disabled) { opacity: .42; cursor: not-allowed; }
.showcase-option input { width: 18px; height: 18px; accent-color: #8d55ef; }
.showcase-option img { width: 46px; height: 58px; border: 1px solid #25252d; border-radius: 5px; object-fit: cover; }
.showcase-option strong, .showcase-option small { display: block; overflow-wrap: anywhere; }
.showcase-option strong { font-size: .78rem; line-height: 1.15; }
.showcase-option small { margin-top: 4px; opacity: .55; font-size: .65rem; }
.showcase-editor-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 2px solid #e6e1eb; }
.showcase-editor-panel > footer p { margin: 0; color: #b21f3d; font-size: .78rem; font-weight: 750; }
.showcase-editor-panel > footer button { min-width: 150px; background: #ffd166; }
.trade-composer { margin: 35px 0; padding: 24px; border: 3px solid #25252d; border-radius: 14px; background: #e8fff5; box-shadow: 6px 6px 0 #25252d; }
.trade-composer h2 { margin: 14px 0 4px; }
.trade-composer p { margin: 5px 0; }
.trade-composer form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 14px; align-items: end; margin-top: 18px; }
.trade-composer label { display: grid; gap: 6px; font-size: .8rem; font-weight: 900; }
.trade-composer select { min-width: 0; padding: 11px; border: 2px solid #25252d; border-radius: 8px; background: #fff; }
.booster-composer { background: #fff3bc; }
.booster-composer form { grid-template-columns: minmax(240px, 1fr) auto; }
.trade-arrow { padding-bottom: 10px; font-size: 1.6rem; font-weight: 1000; }
.profile-collection-toolbar { margin-top: 38px; }
.social-empty, .social-error { grid-column: 1 / -1; padding: 30px; text-align: center; font-weight: 800; }
.social-error { color: #b21f3d; }
.inspector-trade-button { margin-top: 16px; }
.trade-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; }
.trade-filters button { background: #fff; }
.trade-filters button.active { background: #ffd166; transform: translate(-2px, -2px); }
.trade-list { display: grid; gap: 22px; max-width: 1000px; margin: auto; }
.trade-list-item { padding: 20px; border: 3px solid #25252d; border-radius: 14px; background: #fff; box-shadow: 6px 6px 0 #25252d; }
.trade-list-item.status-accepted { background: #e8fff5; }
.trade-list-item.status-declined, .trade-list-item.status-cancelled { opacity: .7; }
.trade-list-item > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.trade-list-item > header a { color: inherit; font-weight: 900; }
.trade-list-item > header > strong { padding: 3px 7px; background: #f4eaff; border: 2px solid #25252d; border-radius: 20px; font-size: .7rem; text-transform: uppercase; }
.trade-offer-message { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid #9ba360; background: #f1f2e7; font-style: italic; }
.trade-card-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.trade-card-pair > b { font-size: 2rem; }
.trade-card-pair > div > small { display: block; margin-bottom: 7px; font-weight: 900; text-transform: uppercase; }
.trade-mini-card { --rarity-color: #8a96a3; display: grid; grid-template-columns: 90px 1fr; overflow: hidden; position: relative; border: 3px solid #25252d; border-radius: 10px; background: #fff; box-shadow: 4px 4px 0 var(--rarity-color); }
.trade-mini-card.rarity-uncommon { --rarity-color: #30a46c; }
.trade-mini-card.rarity-rare { --rarity-color: #3976e8; }
.trade-mini-card.rarity-epic { --rarity-color: #9c4dcc; }
.trade-mini-card.rarity-legendary { --rarity-color: #f39a20; }
.trade-mini-card.rarity-unique { --rarity-color: #ff3cac; background: linear-gradient(145deg, #fff 0 76%, rgba(255, 60, 172, .13) 91%, rgba(77, 238, 234, .2)); box-shadow: 4px 4px 0 #ff3cac, 7px 7px 0 #17131f, 0 0 18px rgba(77, 238, 234, .42); }
.trade-mini-card.rarity-mythical { --rarity-color: #d8243f; background: linear-gradient(145deg, #fff 0 72%, #ffd8ce 88%, #29070d); box-shadow: 4px 4px 0 #d8243f, 7px 7px 0 #1b080b, 0 0 20px #e244386b; }
.trade-mini-card.rarity-celestial { --rarity-color: #776de8; background: radial-gradient(circle at 86% 18%, #fff 0 1px, transparent 2px), linear-gradient(145deg, #fff 0 70%, #e4e5ff 88%, #35256d); box-shadow: 4px 4px 0 #776de8, 7px 7px 0 #35256d, 0 0 22px #8edfff80; }
.trade-mini-card.rarity-gilded { --rarity-color: #FFD700; }
.trade-mini-card.rarity-counterfeit { --rarity-color: #9ba360; background: #f1f2e7; box-shadow: 4px 4px 0 #9ba360, 7px 7px 0 #17131f; }
.trade-mini-card.is-foil { background: linear-gradient(135deg, #fff, #e9fff8 35%, #f7e9ff 70%, #fff8cf); box-shadow: 4px 4px 0 var(--rarity-color), 0 0 18px rgba(124, 236, 255,.55); }
.trade-mini-card.rarity-unique.is-foil { background: linear-gradient(135deg, #fff, #e9fff8 40%, #ffe8f6 76%, #d9fffc); box-shadow: 4px 4px 0 #ff3cac, 7px 7px 0 #17131f, 0 0 22px rgba(77, 238, 234, .65); }
.trade-mini-card img { width: 90px; height: 90px; object-fit: cover; border-right: 3px solid #25252d; }
.trade-mini-card div { min-width: 0; padding: 12px; align-self: center; }
.trade-mini-card strong, .trade-mini-card small { display: block; overflow-wrap: anywhere; }
.trade-mini-card small { margin-top: 5px; opacity: .6; }
.trade-list-item footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.trade-list-item footer button.secondary { background: #fff; }

@media (max-width: 760px) {
    .social-page { padding: 12px; }
    .activity-feed { padding: 16px; }
    .activity-feed li { align-items: flex-start; flex-direction: column; gap: 5px; }
    .public-profile-header { grid-template-columns: 82px 1fr; }
    .profile-avatar-public { width: 78px; height: 78px; }
    .profile-header-actions { grid-column: 1 / -1; width: 100%; justify-items: stretch; }
    .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-showcase { padding: 20px 16px 24px; }
    .profile-showcase > header { align-items: stretch; flex-direction: column; }
    .profile-showcase-grid { gap: 20px; }
    .profile-showcase-grid .collection-card-button { width: min(38vw, 145px); }
    .showcase-editor { padding: 12px; }
    .showcase-editor-panel { max-height: calc(100dvh - 24px); padding: 18px; }
    .showcase-options { grid-template-columns: 1fr; }
    .showcase-editor-panel > footer { align-items: stretch; flex-direction: column; }
    .trade-composer form { grid-template-columns: 1fr; }
    .booster-composer form { grid-template-columns: 1fr; }
    .trade-arrow { padding: 0; text-align: center; transform: rotate(90deg); }
    .trade-card-pair { grid-template-columns: 1fr; }
    .trade-card-pair > b { transform: rotate(90deg); text-align: center; }
}
.profile-progression { margin: 20px 0; padding: 20px; border: 3px solid #25252d; border-radius: 12px; background: #fff3be; color: #25252d; }
.profile-progression summary { cursor: pointer; font-weight: 800; }
.profile-level-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 28px; }
.profile-level-overview { flex: 1 1 280px; max-width: 640px; min-width: 0; }
.profile-level-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.profile-level-title strong { font-size: 1.45rem; }
.profile-level-title span, .profile-level-overview small { color: #716b79; font-size: .8rem; }
.profile-progression progress { display: block; width: 100%; height: 9px; margin: 10px 0 6px; accent-color: #7c3aed; }
.social-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.social-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid #aaa5b0; border-radius: 8px; background: #fff; color: #51435e; font-size: .8rem; font-weight: 800; text-decoration: none; }
.social-action:hover { border-color: #8d6cb2; background: #f4eaff; color: #5d2bb8; }
.collection-load-more { display: block; margin: 24px auto 0; padding: 11px 18px; border: 2px solid #25252d; border-radius: 8px; background: #fff; color: #25252d; font-weight: 900; box-shadow: 3px 3px 0 #25252d; cursor: pointer; }
.collection-load-more[hidden] { display: none; }
.collection-load-more:hover { background: #f4eaff; }
.social-action:focus-visible, .badge-cabinet > summary:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.badge-cabinet { margin: 22px 0 16px; border: 1px solid #dedbd6; border-radius: 12px; background: #fffdf9; color: #25252d; box-shadow: 0 3px 0 #e9e3ee; overflow: hidden; }
.badge-cabinet > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px 48px 18px 20px; list-style: none; background: #f4eff9; }
.badge-cabinet[open] > summary { border-bottom: 1px solid #e5deec; }
.badge-cabinet > summary::-webkit-details-marker { display: none; }
.badge-cabinet > summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #716b79; font-size: 1.4rem; font-weight: 500; }
.badge-cabinet[open] > summary::after { content: '−'; }
.badge-cabinet summary span { color: #716b79; font-size: .6rem; letter-spacing: .16em; font-weight: 900; }
.badge-cabinet h2 { margin: 5px 0 0; font-size: 1.25rem; color: #352940; }
.badge-cabinet summary p { margin: 0; color: #716b79; font-size: .8rem; }
.badge-subsection { padding: 20px 20px 0; }
.badge-subsection h3 { margin: 0; color: #716b79; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.badge-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 11px; margin: 0; padding: 12px 0 16px; list-style: none; }
.badge-display { --metal: #e5b75c; --shine: #fff1b3; --edge: #8c5b23; text-align: center; min-width: 0; }
.badge-tone-common { --metal: #b7c2ce; --shine: #eff6ff; --edge: #566276; }
.badge-tone-uncommon { --metal: #68bd94; --shine: #cbffe0; --edge: #28614a; }
.badge-tone-rare { --metal: #6e9de2; --shine: #d4eaff; --edge: #304e89; }
.badge-tone-epic { --metal: #ba89e4; --shine: #f3dcff; --edge: #6a3989; }
.badge-tone-unique { --metal: #ef86b7; --shine: #ffe0f0; --edge: #962b64; }
.badge-tone-mythical { --metal: #bd243b; --shine: #ffb08f; --edge: #26070c; }
.badge-tone-celestial { --metal: #776de8; --shine: #e9f7ff; --edge: #32266f; }
.badge-tone-gilded { --metal: #FFD700; --shine: #fff4ad; --edge: #7a6500; }
.badge-tone-counterfeit { --metal: #9ba360; --shine: #eef0d8; --edge: #596033; }
.badge-mount { position: relative; width: 79px; height: 92px; margin: 0 auto; filter: drop-shadow(0 3px 3px #30223e2e); }
.badge-ribbon { position: absolute; left: 17px; top: 47px; width: 45px; height: 42px; background: linear-gradient(90deg, #643775, #af78ba 46%, #542969 50%, #985eaa); clip-path: polygon(0 0, 100% 0, 94% 100%, 50% 78%, 6% 100%); }
.badge-medal { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border: 3px solid var(--edge); border-radius: 50%; background: linear-gradient(135deg, var(--shine), var(--metal) 48%, var(--edge)); box-shadow: inset 0 0 0 3px var(--shine), inset 0 0 0 7px var(--metal), inset 0 0 0 9px var(--edge), 0 3px 0 var(--edge); }
.badge-medal[data-badge-effect="negative"] { filter: invert(1); }
.badge-medal::after { content: ''; position: absolute; inset: 9px; border: 1px dashed var(--shine); border-radius: 50%; opacity: .75; }
.badge-medal svg { width: 40px; height: 40px; fill: none; stroke: var(--edge); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 0 var(--shine)); }
/* Above the effect: the count is information, not decoration. */
.badge-multiplicity { position: absolute; right: 0; top: 52px; z-index: 3; min-width: 24px; padding: 1px 5px; border: 2px solid #f9eac9; border-radius: 6px; background: #352940; color: #fff3d9; font-size: .68rem; font-weight: 900; box-shadow: 0 2px 0 #201829; }
.badge-plaque { position: relative; padding: 5px 7px; border: 1px solid #cdb68f; border-radius: 5px; background: #e6d6b4; color: #3a2f43; box-shadow: 0 2px 0 #b59f78; }
.badge-plaque small, .badge-plaque strong, .badge-plaque span { display: block; }
.badge-plaque small { color: #7d6a4d; font-size: .45rem; letter-spacing: .11em; font-weight: 900; }
/* Two lines are reserved whatever the title, so a shelf of plaques lines up. */
.badge-plaque strong { display: flex; align-items: center; justify-content: center; min-height: 1.75rem; margin: 2px 0 1px; font-size: .72rem; line-height: 1.2; text-transform: capitalize; overflow-wrap: anywhere; }
.badge-plaque span { color: #7d6a4d; font-size: .58rem; font-weight: 800; }
.badge-description { margin: 6px 0 0; color: #716b79; font-size: .62rem; line-height: 1.4; overflow-wrap: anywhere; }
.badge-flavor { margin: 4px 0 0; color: #7c7684; font-size: .64rem; font-style: italic; line-height: 1.4; overflow-wrap: anywhere; }
.badge-inactive .badge-mount, .badge-inactive .badge-plaque { filter: grayscale(1); opacity: .55; }
.badge-cabinet > footer { padding: 14px 20px; border-top: 1px solid #e5deec; color: #716b79; text-align: center; font-size: .72rem; }
.badge-cabinet-empty { grid-column: 1 / -1; padding: 30px 8px; text-align: center; font-weight: 800; }
.badge-cabinet-empty span { display: inline-block; margin-top: 10px; color: #716b79; font-size: .85rem; font-weight: 400; }
.badge-subsection-empty { grid-column: 1 / -1; margin: 0; color: #716b79; font-size: .82rem; }
@media (max-width: 520px) { .badge-subsection { padding: 18px 12px 0; } .badge-shelves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .badge-cabinet > summary { grid-template-columns: 1fr; gap: 8px; padding: 16px 44px 16px 14px; } .profile-level-header .social-actions { width: 100%; } .profile-level-header .social-action { flex: 1; } }
.ranking-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.ranking-table th, .ranking-table td { padding: 12px 8px; border-bottom: 2px solid #25252d; text-align: left; }
.ranking-actions { margin-top: 24px; }

/* Keep the collection wide and let the card artwork carry the colour. */
.collector-body { padding: 0; }
.public-profile-page { max-width: none; padding: 24px clamp(16px, 3vw, 64px); }
.public-profile-page .public-profile-header { padding: 0 0 24px; border: 0; border-bottom: 1px solid #dedbd6; border-radius: 0; background: transparent; box-shadow: none; }
.public-profile-page .public-profile-header h1 { color: #25252d; text-shadow: none; font-size: clamp(2rem, 4vw, 3rem); }
.profile-identity { min-width: 0; }
.public-profile-header:has(.profile-name-form:not([hidden])) { align-items: start; }
.profile-name-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.public-profile-page .profile-name-row h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.public-profile-header .profile-name-edit { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; box-shadow: none; color: #716b79; }
.public-profile-header .profile-name-edit:hover, .public-profile-header .profile-name-edit[aria-expanded="true"] { border-color: #d6d1dc; background: #f4eaff; color: #5d2bb8; }
.profile-name-form { display: grid; gap: 10px; max-width: 440px; margin-top: 16px; padding: 16px; border: 1px solid #dedbd6; border-radius: 12px; background: #fff; }
.profile-name-form label { font-size: .8rem; font-weight: 800; }
.profile-name-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #aaa5b0; border-radius: 7px; background: #fff; color: #25252d; font: inherit; font-size: 1rem; }
.profile-name-hint { color: #716b79; font-size: .75rem; line-height: 1.5; }
.profile-name-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.public-profile-header .profile-name-actions button { padding: 9px 12px; border: 1px solid #aaa5b0; box-shadow: none; font-size: .8rem; }
.public-profile-header .profile-name-actions button[type="button"] { border-color: transparent; background: transparent; color: #716b79; }
.profile-name-form input:focus-visible, .public-profile-header .profile-name-edit:focus-visible, .profile-name-actions button:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.profile-name-form button:disabled, .public-profile-header .profile-name-edit:disabled { opacity: .6; cursor: wait; }
.profile-photo-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #716b79; font-size: .8rem; cursor: pointer; }
.profile-photo-toggle input { width: 16px; height: 16px; margin: 0; accent-color: #7c3aed; }
.profile-photo-toggle input:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.public-profile-header .profile-identity-status { margin-top: 10px; color: #39734b; font-size: .8rem; overflow-wrap: anywhere; }
.public-profile-header .profile-identity-status[data-error="true"] { color: #b21f3d; }
.public-profile-header .profile-name-edit[hidden], .profile-name-form[hidden], .profile-photo-toggle[hidden], .profile-identity-status:empty { display: none; }
.public-profile-page .social-kicker { padding: 0; background: transparent; color: #716b79; font-size: .7rem; transform: none; }
.public-profile-page .profile-stat-grid { margin: 24px 0; gap: 0; }
.public-profile-page .profile-stat-grid article { padding: 8px 16px; border: 0; border-right: 1px solid #dedbd6; border-radius: 0; background: transparent; box-shadow: none; }
.public-profile-page .profile-stat-grid article:last-child { border-right: 0; }
.public-profile-page .profile-stat-grid strong { font-size: 1.5rem; }
.public-profile-page .profile-stat-grid span { color: #716b79; font-weight: 650; text-transform: none; }
.public-profile-page .profile-progression { padding: 14px 0; border: 0; border-bottom: 1px solid #dedbd6; border-radius: 0; background: transparent; }
.public-profile-page .profile-showcase { padding: 20px 0 28px; border: 0; border-bottom: 1px solid #dedbd6; border-radius: 0; background: transparent; box-shadow: none; }
.public-profile-page .profile-showcase::before { display: none; }
.public-profile-page .pending-boosters { max-width: none; }
.public-profile-page .profile-collection-toolbar { max-width: none; margin: 28px 0 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.public-profile-page .card-browser { margin: 12px 0; }
.public-profile-page .card-browser input,
.public-profile-page .card-browser select,
.public-profile-page .card-browser button,
.public-profile-page .bulk-sale-toolbar button,
.public-profile-page .profile-showcase > header button,
.public-profile-page .profile-header-actions button { border: 1px solid #aaa5b0; box-shadow: none; }
.public-profile-page .card-browser button { background: transparent; }
.public-profile-page > .collection-grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 36px 28px; padding: 0; }

@media (max-width: 760px) {
    .public-profile-page .public-profile-header { gap: 16px; }
    .public-profile-page .profile-stat-grid { row-gap: 20px; }
    .public-profile-page .profile-stat-grid article:nth-child(2n) { border-right: 0; }
}
#profileFridge { flex: 0 0 min(300px, 100%); min-width: 0; }
.profile-showcase .fridge-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; margin: 20px 0; box-shadow: none; transform: none; }
button.fridge-preview { cursor: zoom-in; }
.fridge-stage { position: relative; width: 100%; aspect-ratio: .49; overflow: hidden; isolation: isolate; }
.fridge-art { position: absolute; width: 210%; max-width: none; left: -54%; top: -1%; pointer-events: none; }
/* Safe center positions leave room for the full magnet at every rotation,
   to the right of the handles and inside the outer edges of both doors. */
.fridge-door { position: absolute; left: 39%; top: 12%; width: 44%; height: 74%; }
.fridge-door { --sticker-width: 32%; --sticker-height: auto; }
.fridge-editor { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; box-sizing: border-box; padding: 24px; border: 3px solid #25252d; background: #fff9ed; color: #25252d; }
.fridge-editor:not([open]) { display: none; }
.fridge-editor::backdrop { background: #191323b3; }
.fridge-editor > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fridge-editor h3 { margin: 0; }
.fridge-editor { width: min(1080px, calc(100vw - 32px)); border-radius: 17px; background: #fdfaf5; overflow-y: auto; }
.fridge-editor.is-decorating { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr); gap: 24px; }
.fridge-editor > header { grid-column: 1 / -1; }
.fridge-editor [data-fridge-canvas] { width: min(100%, 34vh); margin: auto; }
.fridge-editor .sticker-editor { padding: 0; margin: 0; border: 0; }
.fridge-editor h3 { font-size: 36px; }
.fridge-magnifier { --magnifier-background: #fff; }
@media (max-width: 760px) {
    .fridge-editor.is-decorating { display: block; }
    .fridge-editor [data-fridge-canvas] { width: min(100%, 22vh); margin: 8px auto; }
    .fridge-editor { padding: 16px; }
}
@media (max-width: 760px) {
    .profile-showcase-content { flex-direction: column; }
    .profile-showcase-grid { width: 100%; padding: 0; }
    #profileFridge { flex-basis: auto; width: min(300px, 100%); }
}

.trade-suggestions { display: grid; gap: 12px; margin-top: 28px; }
.trade-suggestions-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade-suggestions h2 { font-size: 1.2rem; font-weight: 1000; }
#tradeSuggestionRefresh { padding: 8px 14px; border: 3px solid #25252d; border-radius: 8px; background: #fff; font-weight: 1000; box-shadow: 3px 3px 0 #25252d; cursor: pointer; }
#tradeSuggestionRefresh:disabled { opacity: .5; cursor: progress; }
.trade-suggestion-list { display: grid; gap: 10px; }
.trade-suggestion { display: grid; gap: 16px; padding: 16px 18px; border: 3px solid #25252d; border-radius: 12px; background: #fff; box-shadow: 5px 5px 0 #25252d; }
/* Who it is comes first and reads at a glance: picture, name, level. */
.trade-suggestion-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
/* A collector reads the same in a trade and in a suggestion: picture, name, level. */
.collector-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; }
.collector-chip > span { display: grid; gap: 2px; min-width: 0; }
.collector-chip-avatar { display: block; width: 46px; height: 46px; border: 3px solid #25252d; border-radius: 50%; background: #f4eaff; overflow: hidden; }
.collector-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.collector-chip-avatar .avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.2rem; font-weight: 1000; }
.collector-chip-name { color: #25252d; font-size: 1rem; font-weight: 1000; overflow-wrap: anywhere; }
.collector-chip-level { color: #625c6d; font-size: .72rem; font-weight: 1000; text-transform: uppercase; }
.trade-suggestion .trade-card-pair > div > small { color: #625c6d; font-size: .7rem; }
.trade-suggestion .trade-card-pair > div:only-child { grid-column: 1 / -1; }
.trade-suggestion .trade-bundle .card-preview-button > .trading-card { zoom: .5; }
.trade-suggestion-open { padding: 9px 16px; border: 3px solid #25252d; border-radius: 8px; background: #ffd6a5; color: #25252d; font-weight: 1000; text-decoration: none; white-space: nowrap; box-shadow: 3px 3px 0 #25252d; }