/* Profile polish — Matchmaking look & feel */

/* Simple alerts used across pages */
.dc-alert{padding:12px 16px; margin: 0 0 14px; border-radius: var(--hud-radius-sm); font-size: 13px;}
.dc-alert.success{background: rgba(0,210,106,0.10); border: 1px solid rgba(0,210,106,0.45); color: rgba(0,210,106,0.95);}
.dc-alert.danger{background: rgba(255,71,87,0.10); border: 1px solid rgba(255,71,87,0.45); color: rgba(255,71,87,0.95);}

/* Hero banner + avatar */
.profile-hero-wrap{position:relative; overflow:hidden;}
.profile-hero-wrap > *{position:relative; z-index:1;}
.profile-hero-wrap .profile-hero-banner{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.profile-hero-wrap .profile-hero-banner::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.58));}
.profile-hero-map{position:relative; min-height: 220px; padding: 0; overflow:hidden;}
.profile-hero-banner{height:100%;}
.profile-hero-ava{position:absolute; left:14px; bottom:14px;}
.profile-hero-avatar{width: 96px; height: 96px; border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); box-shadow: 0 20px 70px rgba(0,0,0,.50);} 
.profile-hero-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.profile-hero-avatar .cc-avatar-text{font-weight: 950; font-size: 34px; opacity:.95;}

/* Content lists */
.profile-side{display:grid; gap:14px; align-content:start;}

.profile-match{display:flex; align-items:center; gap:12px; padding: 12px 12px; border-radius: var(--hud-radius-sm); border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); text-decoration:none; color: inherit;}
.profile-match:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);}
.profile-match-res{width: 40px; height: 40px; border-radius: 12px; display:grid; place-items:center; font-weight: 950; letter-spacing:.08em;}
.profile-match-res.win{background: rgba(0,210,106,.12); border: 1px solid rgba(0,210,106,.55); color: rgba(0,210,106,.95);}
.profile-match-res.loss{background: rgba(255,71,87,.10); border: 1px solid rgba(255,71,87,.55); color: rgba(255,71,87,.95);}
.profile-match-main{min-width:0; flex:1;}
.profile-match-map{font-weight: 900; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-match-sub{margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.62);}
.profile-match-go{opacity:.65; font-weight: 900;}

.profile-team{display:flex; align-items:center; gap:12px; padding: 12px 12px; border-radius: var(--hud-radius-sm); border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); text-decoration:none; color: inherit;}
.profile-team:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);}
.profile-team-logo{width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); display:grid; place-items:center; overflow:hidden; font-weight: 900;}
.profile-team-logo img{width:100%; height:100%; object-fit:cover; display:block;}
.profile-team-main{min-width:0; flex:1;}
.profile-team-name{font-weight: 900; font-size: 12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.profile-team-sub{margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .08em;}

/* Modal form styling (minimal) */
.form .form-row{display:block; margin-bottom: 12px;}
.form .label{display:block; margin-bottom: 6px; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 800;}
.textarea{width:100%; padding: 10px 12px; border-radius: var(--hud-radius-sm); border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.30); color: var(--text); resize: vertical;}


/* Showcase */
.showcase-kpis{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 980px){
  .showcase-kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.skpi{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 10px 12px;
}
.skpi .l{font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 900;}
.skpi .v{margin-top: 4px; font-size: 18px; font-weight: 950;}

.showcase-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .showcase-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.showcase-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 12px;
  min-height: 144px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.showcase-item.empty{opacity:.72;}
.showcase-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.showcase-label{font-size: 11px; letter-spacing:.10em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 900;}
.showcase-rarity{
  font-size: 10px;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-weight: 950;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.showcase-rarity.r-legendary{border-color: rgba(255,193,7,.55); color: rgba(255,193,7,.95); background: rgba(255,193,7,.10);}
.showcase-rarity.r-epic{border-color: rgba(156,39,176,.55); color: rgba(196,96,214,.95); background: rgba(156,39,176,.12);}
.showcase-rarity.r-rare{border-color: rgba(33,150,243,.55); color: rgba(114,181,255,.95); background: rgba(33,150,243,.10);}
.showcase-rarity.r-uncommon{border-color: rgba(0,210,106,.55); color: rgba(0,210,106,.95); background: rgba(0,210,106,.10);}

.showcase-prev{display:flex; align-items:center; justify-content:center; padding: 6px 0;}
.showcase-name{font-weight: 950; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.showcase-empty{height: 62px; display:grid; place-items:center; border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; color: rgba(255,255,255,.55); font-weight: 900;}

.showcase-collection{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.showcase-collection .col{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 8px 10px;
  border-radius: 999px;
}

.input, select.input{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--hud-radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: var(--text);
}

/* ===== Profile v9: Pinned / Trophy Wall / Match History (Valorant-ish) ===== */

.edit-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; align-items:end;}
@media (max-width: 980px){.edit-grid{grid-template-columns: 1fr;}}

.check{display:flex; gap:10px; align-items:center; padding: 10px 12px; border-radius: var(--hud-radius-sm); border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.30); color: var(--text);}
.check input{width:16px; height:16px;}

.details{border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(0,0,0,.16); padding: 10px 12px;}
.details summary{cursor:pointer; font-weight: 900; letter-spacing:.02em;}

/* Rarity colors */
:root{
  --rar-common: rgba(160,160,160, .75);
  --rar-uncommon: rgba(0,210,106, .80);
  --rar-rare: rgba(33,150,243, .85);
  --rar-epic: rgba(156,39,176, .90);
  --rar-legendary: rgba(255,193,7, .90);
}

.pinned-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
@media (max-width: 980px){.pinned-grid{grid-template-columns: 1fr;}}

.trophy-grid{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;}
@media (max-width: 1200px){.trophy-grid{grid-template-columns: repeat(3, minmax(0,1fr));}}
@media (max-width: 980px){.trophy-grid{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width: 520px){.trophy-grid{grid-template-columns: 1fr;}}

.trophy-card{
  position: relative;
  border-radius: 16px;
  padding: 12px 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
  overflow: hidden;
  min-height: 118px;
  transform: translateZ(0);
}
.trophy-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  pointer-events:none;
  opacity: .55;
  background: radial-gradient(120px 80px at 15% 15%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(180px 120px at 85% 25%, rgba(255,255,255,.06), transparent 60%);
}
.trophy-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 16px;
  pointer-events:none;
  opacity:.22;
  background: radial-gradient(240px 160px at 0% 0%, var(--rar-common), transparent 60%);
}
.trophy-card:hover{border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.22));}
.trophy-card:hover::before{opacity:.75;}

.trophy-card.r-common::after{background: radial-gradient(240px 160px at 0% 0%, var(--rar-common), transparent 60%);} 
.trophy-card.r-uncommon::after{background: radial-gradient(240px 160px at 0% 0%, var(--rar-uncommon), transparent 60%);} 
.trophy-card.r-rare::after{background: radial-gradient(240px 160px at 0% 0%, var(--rar-rare), transparent 60%);} 
.trophy-card.r-epic::after{background: radial-gradient(240px 160px at 0% 0%, var(--rar-epic), transparent 60%);} 
.trophy-card.r-legendary::after{background: radial-gradient(240px 160px at 0% 0%, var(--rar-legendary), transparent 60%);} 

.trophy-card.locked{opacity:.72; filter: saturate(.45);} 
.trophy-card.locked .trophy-name{opacity:.85;}
.trophy-card.locked .trophy-desc{opacity:.55;}

.trophy-top{display:flex; gap: 12px; align-items:center; position:relative; z-index:1;}
.trophy-icon{width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); display:grid; place-items:center; overflow:hidden; font-size: 20px; box-shadow: 0 14px 50px rgba(0,0,0,.45);} 
.trophy-icon img{width:100%; height:100%; object-fit:cover; display:block;}

.trophy-meta{min-width:0; flex:1;}
.trophy-name{font-weight: 950; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em;}
.trophy-sub{margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.64); letter-spacing: .08em; text-transform: uppercase;}

.trophy-desc{
  position:relative;
  z-index:1;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trophy-lock{
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  display:grid;
  place-items:center;
  z-index:2;
  opacity:.85;
}

/* Match history (map background cards) */
.mh-grid{display:grid; gap: 10px;}

.mh-card{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  text-decoration:none;
  color: inherit;
}
.mh-card:hover{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04);} 

.mh-card .mh-bg{
  position:absolute;
  inset:0;
  background-image: var(--mh-bg);
  background-size: cover;
  background-position: center;
  opacity: .18;
  filter: blur(0px);
  transform: scale(1.05);
}
.mh-card .mh-bg::after{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.28), rgba(0,0,0,.70));}

.mh-main{position:relative; z-index:1; min-width:0; flex:1;}
.mh-top{display:flex; align-items:center; justify-content:space-between; gap: 12px;}
.mh-map{font-weight: 950; font-size: 13px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mh-sub{margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.70); display:flex; align-items:center; gap: 8px;}
.mh-score{font-weight: 950; letter-spacing:.08em;}
.mh-dot{opacity:.55;}

.mh-badges{display:flex; gap: 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.mh-badge{font-size: 10px; letter-spacing:.12em; text-transform: uppercase; font-weight: 950; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);}
.mh-badge.b-win{border-color: rgba(0,210,106,.55); background: rgba(0,210,106,.12); color: rgba(0,210,106,.95);} 
.mh-badge.b-loss{border-color: rgba(255,71,87,.55); background: rgba(255,71,87,.12); color: rgba(255,71,87,.95);} 
.mh-badge.b-muted{border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.22); color: rgba(255,255,255,.70);} 

.mh-go{position:relative; z-index:1; opacity:.70; font-weight: 950;}

.mh-card.win{box-shadow: 0 20px 80px rgba(0,210,106,.10);} 
.mh-card.loss{box-shadow: 0 20px 80px rgba(255,71,87,.08);}