/* One grade palette for feed, leaderboard and record snapshots. */
.previewGradeA { --preview-grade:#EB4B4B; }
.previewGradeB { --preview-grade:#D32CE6; }
.previewGradeC { --preview-grade:#8847FF; }
.previewGradeD { --preview-grade:#4B69FF; }
.previewGradeE { --preview-grade:#5E98D9; }
.previewGradeF { --preview-grade:#B0C3D9; }
.previewGradeLast,.previewGradeSpecial { --preview-grade:#E4AE39; }
.previewGradeNeutral { --preview-grade:#77808F; }
.communityPreview { width:100%; min-width:0; margin:0; padding:34px 0 44px; color:#f2f3f7; }
.communityPreview * { box-sizing:border-box; }
.communityPreview button { font:inherit; cursor:pointer; }
.communityPreview button:focus-visible { outline:2px solid #ffd33f; outline-offset:4px; }
.communityPreview h1,.communityPreview h2,.communityPreview h3,.communityPreview p { margin:0; }
.communityPreviewHeading { display:flex; gap:24px; align-items:center; justify-content:space-between; padding-bottom:22px; }
.communityPreviewEyebrow { display:block; color:#b7a46b; font-size:10px; letter-spacing:2px; margin-bottom:9px; }
.communityPreviewHeading h1 { font-size:32px; line-height:1.25; font-weight:760; }
.communityPreviewHeading p { margin-top:10px; color:#a4aaba; font-size:12px; line-height:1.8; }
.communityPreviewBack,.communityPreviewEmpty button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid #ffffff19; border-radius:5px; background:#2b2e39; color:#e3e5ed; font-size:12px!important; }
.communityPreviewBack { flex-shrink:0; }
.communityPreviewNotes { margin-bottom:26px; padding:14px 16px; border:1px solid #d9bd5b24; border-radius:6px; background:#d9bd5b05; }
.communityPreviewNotes strong { color:#d5c68b; font-size:11px; font-weight:600; }
.communityPreviewNotes p { margin-top:6px; color:#929bad; font-size:10px; line-height:1.8; }
.communityPreviewColumns { display:grid; grid-template-columns:70px minmax(170px,1fr) 130px minmax(200px,1.6fr) 24px; gap:20px; padding:0 22px 12px; color:#8993a7; font-size:10px; }
.communityPreviewLeaderboard { display:grid; gap:10px; padding:0; margin:0; list-style:none; }
.communityPreviewRankRow { display:grid; grid-template-columns:70px minmax(170px,1fr) 130px minmax(200px,1.6fr) 24px; align-items:center; gap:20px; width:100%; min-height:112px; padding:16px 22px; border:1px solid #ffffff08; border-left:3px solid var(--preview-grade,#77808F); border-radius:6px; color:inherit; text-align:left; background:linear-gradient(100deg,color-mix(in srgb,var(--preview-grade,#77808F) 6%,transparent),transparent 35%),#242833; }
.communityPreviewRankRow:hover { background-color:#2b303c; border-top-color:#ffffff13; }
.communityPreviewRank { font-size:26px; color:#d1d7e5; font-weight:700; font-variant-numeric:tabular-nums; }
.communityPreviewLeaderboard li:first-child .communityPreviewRank { color:#ffd33f; }
.communityPreviewPlayer { display:flex; align-items:center; gap:13px; min-width:0; }
.communityPreviewPlayer strong { display:block; font-size:14px; font-weight:650; line-height:1.6; overflow-wrap:anywhere; }
.communityPreviewPlayer small { display:block; color:#858fa3; font-size:9px; margin-top:5px; }
.communityPreviewCount strong { display:block; color:#f7db79; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.communityPreviewCount small { color:#8b96aa; font-size:9px; }
.communityPreviewLatest { display:flex; align-items:center; gap:13px; min-width:0; }
.communityPreviewLatest > span:last-child { min-width:0; }
.communityPreviewLatest strong { display:block; font-size:12px; line-height:1.7; font-weight:550; overflow-wrap:anywhere; }
.communityPreviewPrizeImage { flex-shrink:0; width:78px; height:70px; display:flex; align-items:center; justify-content:center; }
.communityPreviewPrizeImage img,.communityPreviewWinImage img { display:block; width:100%; height:100%; object-fit:contain; }
.communityPreviewGrade { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; margin-top:7px; border:1px solid color-mix(in srgb,var(--preview-grade,#77808F) 45%,transparent); border-radius:3px; background:color-mix(in srgb,var(--preview-grade,#77808F) 10%,transparent); color:#edf0f7; font-size:9px; line-height:1.6; white-space:nowrap; }
.communityPreviewGrade:before { content:""; width:4px; height:4px; margin-right:6px; background:var(--preview-grade,#77808F); border-radius:50%; }
.communityPreviewArrow { color:#a5adbc; font-size:20px; }
.communityPreviewProfile { padding:24px; border:1px solid #ffffff0c; border-radius:7px; background:linear-gradient(110deg,#ccb15808,transparent 50%),#242833; }
.communityPreviewProfileHeading { position:relative; justify-content:center; text-align:center; min-height:96px; }
.communityPreviewProfileHeading .communityPreviewBack { position:absolute; left:0; top:7px; }
.communityPreviewProfileBanner { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,1fr) minmax(0,1fr); gap:28px; align-items:center; min-height:270px; }
.communityPreviewRepresentative { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:18px; border-left:2px solid var(--preview-grade,#77808F); border-radius:3px; background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--preview-grade,#77808F) 7%,transparent),transparent 75%); text-align:center; }
.communityPreviewRepresentative > span:first-child { color:#8b96a9; font-size:10px; }
.communityPreviewRepresentativeImage { width:100%; height:140px; margin:10px 0; }
.communityPreviewRepresentativeImage img { display:block; width:100%; height:100%; object-fit:contain; }
.communityPreviewRepresentative > strong { color:#cbd2df; font-size:11px; font-weight:550; line-height:1.8; overflow-wrap:anywhere; }
.communityPreviewIdentity { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.communityPreviewIdentityLabel { color:#a49c80; font-size:10px; }
.communityPreviewIdentity h2 { margin:0; font-size:26px; line-height:1.4; }
.communityPreviewIdentity p { margin-top:2px; color:#7f8ba0; font-size:10px; }
.communityPreviewLevel { display:inline-flex; min-height:25px; align-items:center; padding:4px 10px; border:1px solid #c7b05d35; border-radius:4px; background:#d8b84b09; color:#d1bd77!important; font-size:10px; }
.communityPreviewStats { display:grid; grid-template-columns:1fr; gap:18px; margin:0; padding:0 20px; border:0; }
.communityPreviewStats > div { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:13px; border-bottom:1px solid #ffffff08; }
.communityPreviewStats dt { color:#8f9aaf; font-size:11px; line-height:1.6; }
.communityPreviewStats dd { margin:0; color:#efd17a; font-size:26px; font-weight:700; }
.communityPreviewProfileNote { margin-top:18px!important; color:#8290a6; font-size:10px; line-height:1.8; }
.communityPreviewNoCollection { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; min-height:180px; }
.communityPreviewNoCollection > span { color:#647087; font-size:45px; }
.communityPreviewNoCollection p { color:#8390a6; font-size:11px; }
.communityPreviewEmptyCollection { grid-column:1/-1; padding:40px 18px; border:1px dashed #ffffff12; border-radius:5px; color:#8c98ac; text-align:center; font-size:12px; }
.communityPreviewHistoryHeading { display:flex; gap:12px; align-items:center; margin:32px 0 18px; }
.communityPreviewHistoryHeading h2 { font-size:20px; }
.communityPreviewHistoryHeading > span { color:#7f8ba0; font-size:12px; }
.communityPreviewWinGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.communityPreviewWin { min-width:0; overflow:hidden; border:1px solid #ffffff0a; border-top:2px solid var(--preview-grade,#77808F); border-radius:5px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--preview-grade,#77808F) 7%,transparent),transparent 70%),#252934; }
.communityPreviewWinImage { display:flex; justify-content:center; align-items:center; height:200px; padding:20px; }
.communityPreviewWinBody { padding:0 16px 18px; }
.communityPreviewWinBody .communityPreviewGrade { margin-top:0; }
.communityPreviewWinBody h3 { margin-top:12px; color:#e4e8f1; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.communityPreviewWinBody p { margin-top:14px; color:#7e8aa0; font-size:9px; line-height:1.6; }
.communityPreviewWinBody time { display:block; margin-top:5px; color:#9aa6b9; font-size:10px; }
.communityPreviewEmpty { padding:60px 20px; text-align:center; border:1px dashed #ffffff12; border-radius:6px; margin-bottom:24px; }
.communityPreviewEmpty h1,.communityPreviewEmpty h2 { font-size:22px; }
.communityPreviewEmpty p { margin-top:14px; color:#8c98ad; font-size:12px; line-height:1.8; }
.communityPreviewEmpty button { margin-top:22px; }
.communityPreviewImageMissing { color:#7b8799; font-size:32px; }
@media (max-width:1100px) {
  .communityPreviewColumns,.communityPreviewRankRow { grid-template-columns:42px minmax(145px,1fr) 85px minmax(150px,1.4fr) 18px; gap:12px; }
  .communityPreviewWinGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .communityPreview { padding:25px 0 32px; }
  .communityPreviewHeading { align-items:flex-start; gap:12px; }
  .communityPreviewHeading h1 { font-size:25px; }
  .communityPreviewHeading p { font-size:10px; }
  .communityPreviewBack { max-width:132px; font-size:10px!important; padding:9px 11px; }
  .communityPreviewNotes { padding:12px; }
  .communityPreviewNotes strong { font-size:10px; }
  .communityPreviewNotes p { font-size:9px; }
  .communityPreviewColumns { display:none; }
  .communityPreviewLeaderboard { gap:12px; }
  .communityPreviewRankRow { grid-template-columns:27px minmax(0,1fr) 48px; gap:12px; padding:15px 12px; }
  .communityPreviewRank { font-size:20px; }
  .communityPreviewPlayer { gap:9px; }
  .communityPreviewPlayer strong { font-size:12px; }
  .communityPreviewPlayer small { font-size:8px; }
  .communityPreviewCount { text-align:right; }
  .communityPreviewCount strong { font-size:22px; }
  .communityPreviewLatest { grid-column:2/4; grid-row:2; padding-top:12px; border-top:1px solid #ffffff09; gap:10px; }
  .communityPreviewLatest strong { font-size:10px; }
  .communityPreviewPrizeImage { width:58px; height:56px; }
  .communityPreviewArrow { display:none; }
  .communityPreviewProfile { padding:18px 14px; }
  .communityPreviewProfileHeading { align-items:center; text-align:center; flex-direction:column; }
  .communityPreviewProfileHeading .communityPreviewBack { position:static; margin-top:6px; }
  .communityPreviewProfileBanner { grid-template-columns:1fr; gap:22px; }
  .communityPreviewIdentity { grid-row:1; gap:8px; }
  .communityPreviewIdentity h2 { font-size:22px; }
  .communityPreviewRepresentative { padding:15px 10px; }
  .communityPreviewRepresentativeImage { height:130px; }
  .communityPreviewStats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; padding:18px 0 0; border-top:1px solid #ffffff09; }
  .communityPreviewStats > div { display:flex; flex-direction:column; align-items:center; text-align:center; border:0; padding:0; gap:7px; }
  .communityPreviewStats dt { font-size:9px; }
  .communityPreviewStats dd { font-size:23px; }
  .communityPreviewHistoryHeading h2 { font-size:18px; }
  .communityPreviewWinGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .communityPreviewWinImage { height:145px; padding:12px; }
  .communityPreviewWinBody { padding:0 11px 15px; }
  .communityPreviewWinBody h3 { font-size:11px; margin-top:10px; }
  .communityPreviewWinBody p { font-size:8px; }
  .communityPreviewWinBody time { font-size:9px; }
}
@media (max-width:359px) {
  .communityPreviewHeading { flex-direction:column; }
  .communityPreviewBack { max-width:none; }
  .communityPreviewRankRow { grid-template-columns:22px minmax(0,1fr) 40px; gap:8px; padding-inline:9px; }
  .communityPreviewPlayer { gap:7px; }
  .communityPreviewPlayer strong { font-size:11px; }
  .communityPreviewWinImage { height:120px; }
}

.communityPreviewRank { white-space:nowrap; }
.communityPreviewTitleName { color:#ffd33f; font-weight:inherit; }

/* Original source labels remain 1–4等; these are display colors, not ABC grades. */
.previewGradeCloveTier1{--preview-grade:#EB4B4B}.previewGradeCloveTier2{--preview-grade:#D32CE6}.previewGradeCloveTier3{--preview-grade:#8847FF}.previewGradeCloveTier4{--preview-grade:#4B69FF}