/* Community index + public profile view (/collectors/). Mobile-first; shares the
   Wardrobe's dark-navy panels, ASM blue/violet accents and rarity-toned tiles. */
body[data-page=collectors]{
  --asm-blue:#f2f2f0;--asm-violet:#b9bbbf;--asm-blue-ink:#0b0b0c;
  --navy:#161616;--navy-deep:#131313;--navy-line:#3a3a3a;--navy-line-strong:#535353;
  --ink-soft:#c9c9c9;--ink-dim:#a1a1a1;
  --tone:var(--rarity-common);
  background:#0d0d0d;color:#f4f4f4;
}
body[data-page=collectors] .portal-main{max-width:1240px}
body[data-page=collectors] .button{min-height:44px;border-radius:9px;font-weight:700;letter-spacing:.08em;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
body[data-page=collectors] .button:hover{transform:translateY(-1px)}
body[data-page=collectors] .button.filled{background:var(--asm-blue);border-color:var(--asm-blue);color:var(--asm-blue-ink)}
body[data-page=collectors] .button.filled:hover{background:#afafaf;border-color:#afafaf}
body[data-page=collectors] .button:focus-visible,body[data-page=collectors] a:focus-visible,body[data-page=collectors] input:focus-visible,body[data-page=collectors] button:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
body[data-page=collectors] .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-dim)}
body.portal[data-page=collectors] .status{color:var(--ink-dim);max-width:none;margin:0 0 18px;text-align:left}
body[data-page=collectors] .underlink{color:#bcbcbc;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
body[data-page=collectors] .underlink:hover{color:#e2e2e2}

/* Hero ----------------------------------------------------------------- */
.collectors-hero{position:relative;margin:0 0 20px;padding:4px 0 0}
.community-kicker{display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--asm-blue)}
.community-kicker-line{width:28px;height:1px;background:currentColor;opacity:.7}
body.portal[data-page=collectors] .portal-title{justify-content:flex-start;text-align:left;margin-bottom:10px;align-items:flex-start;flex-wrap:wrap;gap:12px}
body.portal[data-page=collectors] .portal-title h1{margin:0;font-size:clamp(40px,9vw,76px);line-height:.9;font-weight:800;letter-spacing:-.045em;text-transform:uppercase}
body[data-page=collectors] .community-intro{max-width:560px;margin:0 0 20px;text-align:left;color:var(--ink-soft);font-size:15px;line-height:1.55}
.collectors-hero.is-profile .portal-title{margin-bottom:14px}
.collectors-hero.is-profile:not(.is-collection) .portal-title{justify-content:flex-start}
.collectors-hero.is-collection .portal-title h1{font-size:clamp(28px,6vw,44px)}

/* Search --------------------------------------------------------------- */
.community-search{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 22px}
.community-search-field{position:relative;display:flex;align-items:center;min-width:0}
.community-search-field svg{position:absolute;left:16px;color:var(--ink-dim);pointer-events:none}
body.portal[data-page=collectors] .community-search-field input[type=search]{width:100%;min-height:48px;padding:12px 16px 12px 44px;border:1px solid var(--navy-line);border-radius:10px;background:var(--navy-deep);color:#fff;font-size:15px;transition:border-color .18s ease,box-shadow .18s ease}
body.portal[data-page=collectors] .community-search-field input[type=search]::placeholder{color:var(--ink-dim)}
body.portal[data-page=collectors] .community-search-field input[type=search]:hover{border-color:var(--navy-line-strong)}
body.portal[data-page=collectors] .community-search-field input[type=search]:focus{border-color:var(--asm-blue);box-shadow:0 0 0 3px rgba(154,154,154,.22);outline:none}
.community-search-field input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.community-search .button{min-height:48px;padding:12px 26px}
@media (min-width:640px){.community-search{grid-template-columns:minmax(0,1fr) auto;max-width:720px}}

/* Result cards ---------------------------------------------------------- */
body.portal[data-page=collectors] .collector-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:none;margin:0}
@media (min-width:640px){body.portal[data-page=collectors] .collector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){body.portal[data-page=collectors] .collector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.portal[data-page=collectors] .collector-grid:has(.collector-detail),body.portal[data-page=collectors] .collector-grid:has(.collector-collection-detail),body.portal[data-page=collectors] .collector-grid:has(.community-empty){display:block;grid-template-columns:1fr}
body[data-page=collectors] .collector-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--navy-line);border-radius:16px;background:var(--navy);box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body[data-page=collectors] .collector-card:hover,body[data-page=collectors] .collector-card:focus-within{transform:translateY(-4px);border-color:var(--asm-blue);box-shadow:0 18px 40px rgba(154,154,154,.18)}
.collector-card-banner{position:relative;height:110px;background:radial-gradient(120% 140% at 10% 0%,rgba(154,154,154,.55),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(142,142,142,.55),transparent 60%),#171717}
.collector-card-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(22,22,22,.9))}
.collector-card-banner img{display:block;width:100%;height:100%;object-fit:cover}
body[data-page=collectors] .collector-card-body{display:flex;flex-direction:column;flex:1;gap:4px;padding:0 18px 18px;position:relative}
.collector-avatar-ring{display:grid;place-items:center;flex:none;width:72px;height:72px;margin:-38px 0 10px;padding:3px;border-radius:50%;background:linear-gradient(135deg,var(--asm-blue),var(--asm-violet));box-shadow:0 10px 24px rgba(0,0,0,.35)}
.collector-avatar-ring img,.collector-avatar-ring i{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--navy-deep);border:3px solid var(--navy)}
.collector-avatar-ring i{display:grid;place-items:center;color:#e2e2e2;font-style:normal;font-weight:800;font-size:24px}
body[data-page=collectors] .collector-card h2{margin:4px 0 0;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere}
body[data-page=collectors] .collector-card h2 a{color:inherit}
body[data-page=collectors] .collector-card h2 a:hover{color:#e2e2e2}
body[data-page=collectors] .community-handle{display:inline-block;margin:2px 0 8px;padding:0;border:0;background:none;color:var(--asm-blue);font-size:12px;font-weight:700;letter-spacing:.04em}
.collector-card-bio{margin:0 0 12px;color:var(--ink-soft);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.community-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.community-badges li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border:1px solid var(--navy-line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--ink-soft);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.community-badges li.community-badge-holder{border-color:rgba(154,154,154,.45);color:#cbcbcb;background:rgba(154,154,154,.08)}
.community-icon{flex:none;width:14px;height:14px}
body[data-page=collectors] .community-view-link{margin-top:auto;width:100%;gap:6px}

/* Loading + empty states (match the Wardrobe's panels) ------------------- */
.collector-card-skeleton{pointer-events:none}
.collector-card-skeleton .collector-avatar-ring{background:var(--navy-line)}
.skeleton-line{display:block;height:12px;margin:8px 0;border-radius:6px;background:linear-gradient(90deg,#1f1f1f 0%,#2c2c2c 50%,#1f1f1f 100%);background-size:200% 100%}
.skeleton-line.skeleton-title{height:30px;margin:10px 0}
.skeleton-line.skeleton-button{height:44px;margin-top:16px;border-radius:9px}
@media (prefers-reduced-motion:no-preference){.skeleton-line,.collector-detail-skeleton .collector-banner{animation:community-shimmer 1.4s ease-in-out infinite}@keyframes community-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}}
body.portal[data-page=collectors] .community-empty{grid-column:1/-1;width:100%;max-width:640px;margin:0 auto;padding:46px 24px;border:1px solid var(--navy-line);border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#373737,var(--navy-deep) 70%);text-align:center}
body[data-page=collectors] .community-empty .eyebrow{color:var(--asm-blue)}
body[data-page=collectors] .community-empty h2{margin:10px 0 12px;font-size:clamp(24px,5vw,34px);font-weight:800;letter-spacing:-.03em;color:#fff}
body[data-page=collectors] .community-empty p{margin:0 auto 22px;max-width:440px;color:var(--ink-soft);line-height:1.6}

/* Public profile ---------------------------------------------------------- */
body[data-page=collectors] .collector-detail{max-width:none;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.collector-hero{position:relative;overflow:hidden;margin:0 0 20px;border:1px solid var(--navy-line);border-radius:18px;background:var(--navy);box-shadow:0 20px 50px rgba(0,0,0,.3)}
body[data-page=collectors] .collector-hero .collector-banner{display:block;width:100%;height:clamp(150px,30vw,300px);object-fit:cover;margin:0;background:radial-gradient(120% 140% at 10% 0%,rgba(154,154,154,.5),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(142,142,142,.5),transparent 60%),#171717}
.collector-hero::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(150px,30vw,300px);background:linear-gradient(180deg,transparent 45%,rgba(22,22,22,.92));pointer-events:none}
body.portal[data-page=collectors] .collector-identity{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:-44px 0 0;padding:0 18px 22px;text-align:left}
.collector-identity .collector-avatar-ring{width:104px;height:104px;margin:0 0 12px}
.collector-identity .collector-avatar-ring i{font-size:36px}
.collector-identity-copy{min-width:0;max-width:720px}
body.portal[data-page=collectors] .collector-identity .collector-name{margin:4px 0 2px;color:#fff;font-size:clamp(34px,8vw,64px);line-height:.92;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;overflow-wrap:anywhere}
.collector-handles{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 12px}
.collector-handles .community-handle{margin:0;font-size:14px}
body[data-page=collectors] .collector-socials{margin:0;gap:8px}
body[data-page=collectors] .collector-socials a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--navy-line);border-radius:999px;background:rgba(255,255,255,.03);color:#cbcbcb;font-size:11px;font-weight:700;letter-spacing:.06em;transition:border-color .18s ease,background .18s ease}
body[data-page=collectors] .collector-socials a:hover{border-color:var(--asm-blue);background:rgba(154,154,154,.1)}
body.portal[data-page=collectors] .collector-identity .collector-bio{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.collector-identity .community-badges{margin-bottom:10px}
body.portal[data-page=collectors] .collector-identity .collector-wallet{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0;color:var(--ink-dim);font-size:10px;font-weight:700;letter-spacing:.08em}
.collector-wallet code{padding:4px 8px;border:1px solid var(--navy-line);border-radius:6px;background:var(--navy-deep);color:var(--ink-soft);font-size:11px;letter-spacing:0;overflow-wrap:anywhere}

/* Sections: THEIR LOOK + COLLECTIONS HELD --------------------------------- */
body[data-page=collectors] .community-wardrobe,body[data-page=collectors] .collector-detail .community-showcase{margin:0 0 20px;padding:20px 18px;border:1px solid var(--navy-line);border-radius:18px;background:var(--navy)}
body[data-page=collectors] .community-wardrobe-heading,.community-section-heading{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:18px}
body[data-page=collectors] .community-wardrobe-heading h2,body[data-page=collectors] .collector-detail .community-showcase h2{margin:4px 0 6px;font-size:clamp(26px,5vw,40px);line-height:.95;font-weight:800;letter-spacing:-.04em;text-transform:uppercase}
body[data-page=collectors] .community-wardrobe-heading p:last-child,body[data-page=collectors] .community-showcase-copy{margin:0;color:var(--ink-dim);font-size:13px;line-height:1.5}
body[data-page=collectors] .community-wardrobe-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){body[data-page=collectors] .community-wardrobe-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:start}}

/* Stage: soft radial glow in ASM blue + floor ring. The canvas background is
   painted with the same gradient (collectors.js paintStage). */
body[data-page=collectors] .community-look-stage{position:relative;overflow:hidden;min-height:0;border:1px solid var(--navy-line);border-radius:16px;background:radial-gradient(ellipse 70% 55% at 50% 48%,rgba(154,154,154,.35),transparent 70%),linear-gradient(180deg,#1c1c1c,#0b0b0b);box-shadow:inset 0 0 0 1px rgba(154,154,154,.08),0 20px 50px rgba(0,0,0,.35)}
body[data-page=collectors] .community-look-stage::after{content:'';position:absolute;left:50%;bottom:10%;width:62%;height:9%;transform:translateX(-50%);border:2px solid rgba(154,154,154,.45);border-radius:50%;box-shadow:0 0 40px rgba(154,154,154,.25);pointer-events:none;transition:opacity .3s ease}
body[data-page=collectors] .community-look-stage:has(asm-viewer[data-ready=true])::after{opacity:0}
body[data-page=collectors] .community-look-stage asm-viewer{display:block;width:100%;height:380px}
body[data-page=collectors] .community-look-stage asm-viewer canvas{display:block}
@media (min-width:900px){body[data-page=collectors] .community-look-stage asm-viewer{height:560px;max-height:70vh}}
body[data-page=collectors] .community-look-stage>span{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:7px;background:rgba(12,12,12,.78);border:1px solid rgba(154,154,154,.25);color:#e2e2e2;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;backdrop-filter:blur(4px)}
body.portal[data-page=collectors] .community-look-stage>.community-stage-pose{top:12px;bottom:auto;left:12px}
body.portal[data-page=collectors] .community-look-stage>.community-stage-hint{top:auto;bottom:12px;left:12px;color:var(--ink-dim)}
.community-look-side{display:flex;flex-direction:column;min-width:0}

/* Rarity-toned tiles (same tone values as the Wardrobe) ------------------- */
body[data-page=collectors] .community-look-pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 16px;padding:0;list-style:none}
@media (min-width:480px){body[data-page=collectors] .community-look-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){body[data-page=collectors] .community-look-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){body[data-page=collectors] .community-look-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}}
body[data-page=collectors] .community-look-piece{--tone:var(--rarity-common);position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:0;border:1px solid color-mix(in srgb,var(--tone) 40%,#424242);border-radius:11px;background:#1d1d1d;color:#f5f5f5;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body[data-page=collectors] .community-look-piece[data-tone=uncommon]{--tone:var(--rarity-uncommon)}
body[data-page=collectors] .community-look-piece[data-tone=rare]{--tone:var(--rarity-rare)}
body[data-page=collectors] .community-look-piece[data-tone=very-rare]{--tone:var(--rarity-very-rare)}
body[data-page=collectors] .community-look-piece[data-tone=epic]{--tone:var(--rarity-epic)}
body[data-page=collectors] .community-look-piece[data-tone=legendary]{--tone:var(--rarity-legendary)}
body[data-page=collectors] .community-look-piece[data-tone=mythic]{--tone:var(--rarity-mythic)}
body[data-page=collectors] .community-look-piece[data-tone=super-rare]{--tone:var(--rarity-super-rare)}
body[data-page=collectors] .community-look-piece::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tone)}
body[data-page=collectors] .community-look-piece:hover{transform:translateY(-3px);border-color:var(--tone);box-shadow:0 10px 28px color-mix(in srgb,var(--tone) 28%,transparent)}
.community-look-art{display:grid;place-items:center;width:100%;aspect-ratio:1;background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--tone) 22%,#101010),#101010)}
.community-look-art img{width:100%;height:100%;object-fit:contain}
.community-look-art i{color:var(--ink-dim);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.1em}
body[data-page=collectors] .community-look-piece strong{padding:10px 11px 2px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.community-look-meta{padding:0 11px 13px;color:#cbcbcb;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:auto}
.community-look-empty{display:grid;gap:14px;justify-items:start;padding:22px;border:1px dashed var(--navy-line-strong);border-radius:14px;background:var(--navy-deep)}
.community-look-empty .community-showcase-copy{color:var(--ink-soft)}

/* Owner share quest ------------------------------------------------------- */
body[data-page=collectors] .community-share-quest{margin-top:auto;padding:18px;border:1px solid rgba(154,154,154,.45);border-radius:14px;background:linear-gradient(145deg,rgba(154,154,154,.12),rgba(142,142,142,.06) 60%,transparent)}
body[data-page=collectors] .community-share-quest .eyebrow{color:var(--asm-blue)}
body[data-page=collectors] .community-share-quest h3{margin:6px 0 6px;font-size:20px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
body[data-page=collectors] .community-share-quest>p:not(.eyebrow){margin:0 0 14px;color:var(--ink-soft);font-size:13px;line-height:1.5}
body[data-page=collectors] .community-share-actions .button{flex:1 1 160px;gap:6px}
body[data-page=collectors] .community-share-quest small{display:block;margin-top:12px;color:var(--ink-dim);font-size:12px;line-height:1.5}

/* Collections held cards -------------------------------------------------- */
body[data-page=collectors] .community-collections-list{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){body[data-page=collectors] .community-collections-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
body[data-page=collectors] .community-collection-card{min-height:96px;padding:12px;border:1px solid var(--navy-line);border-radius:14px;background:var(--navy-deep);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
body[data-page=collectors] .community-collection-card:hover,body[data-page=collectors] .community-collection-card:focus-visible{transform:translateY(-3px);border-color:var(--asm-blue);background:#1a1a1a;box-shadow:0 14px 30px rgba(154,154,154,.15)}
body[data-page=collectors] .community-collection-cover{border-radius:10px;background:radial-gradient(70% 70% at 50% 60%,rgba(154,154,154,.25),#101010);color:#cbcbcb}
body[data-page=collectors] .community-collection-card-copy b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:normal}
body[data-page=collectors] .community-collection-card-copy small{color:var(--ink-dim)}
body[data-page=collectors] .community-collection-open{color:var(--asm-blue)}
body[data-page=collectors] .community-collections-empty{color:var(--ink-dim)}
body[data-page=collectors] .collector-detail>.underlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0}

/* Collection detail view keeps the portal look but on navy -------------- */
body[data-page=collectors] .collector-collection-detail{background:var(--navy);border-color:var(--navy-line)}

@media (min-width:640px){
  body.portal[data-page=collectors] .collector-identity{flex-direction:row;align-items:flex-start;gap:22px;margin-top:-56px;padding:0 24px 26px}
  .collector-identity .collector-avatar-ring{width:128px;height:128px;margin-bottom:0}
  .collector-identity-copy{padding-top:62px}
  body[data-page=collectors] .community-wardrobe,body[data-page=collectors] .collector-detail .community-showcase{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  body[data-page=collectors] .collector-card,body[data-page=collectors] .community-look-piece,body[data-page=collectors] .community-collection-card,body[data-page=collectors] .button{transition:none}
  body[data-page=collectors] .collector-card:hover,body[data-page=collectors] .community-look-piece:hover,body[data-page=collectors] .community-collection-card:hover,body[data-page=collectors] .button:hover{transform:none}
}

/* Stage colour the 3D viewer paints behind the character (asset-viewer.js reads --viewer-bg). */
body[data-page=collectors] .community-look-stage asm-viewer{--viewer-bg:#1d1d1d}
body[data-page=collectors] .community-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}