/* Officina35mm — Profilo in Community: riquadro in alto, medagliere e carta del badge. Sempre scuro. */
#modal-community-detail {
    --cpx-text: #f8fafc; --cpx-text-2: #e2e8f0; --cpx-muted: #a3afc2; --cpx-faint: #8592a8;
    --cpx-line: rgba(248, 250, 252, .12); --cpx-soft: rgba(248, 250, 252, .07); --cpx-tile: rgba(248, 250, 252, .04);
    --cpx-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --rgb-blue: 125, 211, 252; --rgb-amber: 253, 230, 138; --rgb-purple: 196, 181, 253; --rgb-slate: 203, 213, 225; --rgb-green: 134, 239, 172;
}

/* ---------- Riquadro in alto ---------- */
.cpx-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--cpx-line); background: #2c3648; margin-bottom: 12px; isolation: isolate; }
.cpx-hero__bg { position: absolute; inset: -40px; background: radial-gradient(circle at 50% 30%, rgba(var(--rgb-amber), .25), transparent 60%) center / cover; background-size: cover; background-position: center; filter: blur(34px) saturate(1.2); opacity: .38; z-index: -2; }
.cpx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44, 54, 72, .1), #2c3648 88%); z-index: -1; }
.cpx-hero__in { padding: 20px 18px 16px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.cpx-av { width: 96px; height: 96px; border-radius: 30px; overflow: hidden; display: grid; place-items: center; background: #bfdbfe; color: #0f172a; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 3px rgba(var(--rgb-amber), .55), 0 12px 30px rgba(0, 0, 0, .45); margin-bottom: 6px; }
.cpx-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#modal-community-detail .cpx-nome { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: clamp(21px, 4vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--cpx-text) !important; line-height: 1.15; }
.cpx-carica { margin-top: 2px; }
.cpx-facts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; text-align: left; }
.cpx-facts > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(15, 23, 42, .35); border: 1px solid var(--cpx-soft); min-width: 0; }
.cpx-facts i { font-size: 20px; color: rgb(var(--rgb-amber)); flex: none; }
.cpx-facts b { display: block; color: var(--cpx-text); font-size: 14.5px; line-height: 1.15; }
.cpx-facts small { display: block; color: var(--cpx-muted); font-size: 12px; font-weight: 700; }

/* ---------- Medagliere ---------- */
.cpx-med { margin-top: 12px; padding: 14px 14px 16px; border-radius: 22px; background: #2c3648; border: 1px solid var(--cpx-line); }
.cpx-med__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cpx-med__ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: rgb(var(--rgb-amber)); background: rgba(var(--rgb-amber), .12); border: 1px solid rgba(var(--rgb-amber), .22); font-size: 17px; }
#modal-community-detail .cpx-med__h h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 16px; font-weight: 800; color: var(--cpx-text) !important; }
.cpx-coll { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--cpx-faint); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cpx-coll__bar { width: 80px; height: 6px; border-radius: 6px; background: rgba(248, 250, 252, .1); overflow: hidden; }
.cpx-coll__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #fbbf24); }
.cpx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpx-tile { all: unset; box-sizing: border-box; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 11px; border-radius: 20px; background: var(--cpx-tile); border: 1px solid var(--cpx-soft); text-align: center; cursor: pointer; min-width: 0; transition: background-color .2s var(--cpx-ease), border-color .2s var(--cpx-ease), transform .2s var(--cpx-ease); }
.cpx-tile:focus-visible { outline: 2px solid rgba(var(--rgb-blue), .7); outline-offset: 2px; }
.cpx-tile:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cpx-tile:hover { background: rgba(248, 250, 252, .07); border-color: var(--cpx-line); } }
.cpx-ring { --p: 0; --c: #86efac; position: relative; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(248, 250, 252, .08) 0); margin-bottom: 4px; }
.cpx-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #262f3e; }
.cpx-ring img { position: relative; width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.cpx-tile.is-done .cpx-ring { box-shadow: 0 0 20px rgba(251, 191, 36, .38); }
.cpx-tile.is-sp { background: linear-gradient(160deg, rgba(var(--rgb-purple), .16), rgba(var(--rgb-purple), .05)); border-color: rgba(var(--rgb-purple), .32); }
.cpx-tile.is-sp .cpx-ring { box-shadow: 0 0 18px rgba(var(--rgb-purple), .35); }
.cpx-tile b { font-size: 12.5px; line-height: 1.25; color: var(--cpx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cpx-tile small { font-size: 11px; font-weight: 700; color: var(--cpx-faint); line-height: 1.3; }
.cpx-tile.is-sp small { color: rgb(var(--rgb-purple)); }
.cpx-tile em { font-style: normal; font-size: 10.5px; font-weight: 800; color: rgb(var(--t, var(--rgb-slate))); }
.cpx-vuoto { margin: 6px 0 0; color: var(--cpx-muted); font-size: 13.5px; text-align: center; }
.t-blue { --t: var(--rgb-blue); } .t-amber { --t: var(--rgb-amber); } .t-purple { --t: var(--rgb-purple); } .t-slate { --t: var(--rgb-slate); }

/* ---------- Carta del badge ---------- */
html.cpx-carta-aperta, html.cpx-carta-aperta body { overflow: hidden; }
.cpx-ov { --text-heading: #f8fafc; --cpx-ease: cubic-bezier(0.32, 0.72, 0, 1); position: fixed; inset: 0; z-index: 60000; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 14, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: cpx-fade .2s var(--cpx-ease, ease); font-family: var(--shell-font, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif); }
.cpx-ov[hidden] { display: none; }
@keyframes cpx-fade { from { opacity: 0; } }
@keyframes cpx-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes cpx-float { 50% { transform: translateY(-6px); } }
@keyframes cpx-shine { 60%, 100% { transform: translateX(60%); } }
.cpx-carta { width: min(380px, 100%); perspective: 1200px; animation: cpx-pop .35s cubic-bezier(0.32, 0.72, 0, 1); }
.cpx-card { position: relative; height: min(540px, calc(100dvh - 110px)); transform-style: preserve-3d; transition: transform .7s cubic-bezier(0.32, 0.72, 0, 1); cursor: pointer; outline: none; border-radius: 28px; }
.cpx-card:focus-visible { box-shadow: 0 0 0 3px rgba(125, 211, 252, .6); }
.cpx-card.is-flip { transform: rotateY(180deg); }
.cpx-face { position: absolute; inset: 0; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 24px 22px; display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px; overflow: hidden; border: 1px solid rgba(253, 230, 138, .3);
    background: radial-gradient(circle at 50% 30%, rgba(253, 230, 138, .2), transparent 55%), linear-gradient(160deg, #343f55, #1f2735); color: #e2e8f0; }
.cpx-card.is-sp .cpx-face { border-color: rgba(196, 181, 253, .4); background: radial-gradient(circle at 50% 30%, rgba(196, 181, 253, .24), transparent 55%), linear-gradient(160deg, #3a3558, #1f2335); }
.cpx-face::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); transform: translateX(-60%); animation: cpx-shine 3.2s cubic-bezier(0.32, 0.72, 0, 1) infinite; pointer-events: none; }
.cpx-face__img { width: min(210px, 32dvh); height: min(210px, 32dvh); object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)); animation: cpx-float 5s ease-in-out infinite; }
.cpx-ov .cpx-face h4 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #f8fafc; }
.cpx-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cpx-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(var(--t), .12); color: rgba(var(--t), 1); border: 1px solid rgba(var(--t), .24); }
.cpx-ov .t-blue { --t: 125, 211, 252; } .cpx-ov .t-amber { --t: 253, 230, 138; } .cpx-ov .t-purple { --t: 196, 181, 253; } .cpx-ov .t-slate { --t: 203, 213, 225; }
.cpx-hint { font-size: 12px; color: #a3afc2; display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cpx-back { transform: rotateY(180deg); align-content: start; text-align: left; justify-items: stretch; overflow-y: auto; scrollbar-width: none; }
.cpx-back::-webkit-scrollbar { display: none; }
.cpx-back::after { display: none; }
.cpx-ov .cpx-back h5 { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; color: #fde68a; text-transform: uppercase; letter-spacing: .06em; }
.cpx-ov .cpx-card.is-sp .cpx-back h5 { color: #c4b5fd; }
.cpx-back p { margin: 0 0 12px; font-size: 14.5px; color: #e2e8f0; line-height: 1.55; }
.cpx-liv { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.cpx-liv li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 10px 4px 4px; border-radius: 14px; background: rgba(15, 23, 42, .32); }
.cpx-liv img { width: 36px; height: 36px; object-fit: contain; }
.cpx-ov .cpx-liv b { display: block; font-size: 13px; color: #f8fafc; }
.cpx-ov .cpx-liv small { display: block; font-size: 11.5px; color: #8592a8; }
.cpx-ov .cpx-liv .is-lock b { color: #8592a8 !important; letter-spacing: .2em; }
.cpx-q { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2a3344, #141a24); border: 1px dashed rgba(248, 250, 252, .18); color: rgba(248, 250, 252, .55); font-size: 16px; }
.cpx-ok { color: #86efac; font-size: 18px; }
.cpx-ko { color: #8592a8; }
.cpx-come { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(15, 23, 42, .4); border: 1px solid rgba(248, 250, 252, .1); font-size: 13px; line-height: 1.45; color: #e2e8f0; }
.cpx-come i { font-size: 18px; color: #86efac; flex: none; margin-top: 1px; }
.cpx-chiudi { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 44px; margin-top: 12px; border-radius: 14px; background: rgba(248, 250, 252, .08); color: #f8fafc; font-weight: 800; font-size: 14px; cursor: pointer; transition: background-color .2s cubic-bezier(0.32, 0.72, 0, 1); }
.cpx-chiudi:focus-visible { outline: 2px solid rgba(125, 211, 252, .7); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cpx-chiudi:hover { background: rgba(248, 250, 252, .13); } }

@media (max-width: 420px) {
    .cpx-grid { gap: 6px; }
    .cpx-ring { width: 74px; height: 74px; }
    .cpx-ring img { width: 60px; height: 60px; }
    .cpx-tile { padding: 10px 4px 10px; }
    .cpx-facts { grid-template-columns: minmax(0, 1fr); }
    .cpx-coll__bar { width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .cpx-face__img, .cpx-face::after, .cpx-carta, .cpx-ov { animation: none !important; }
    .cpx-card { transition: none; }
}