/* Player Profile v28 — collectible card + discovery */
#players-panel-profile .skills-panel{ gap:0 }
#players-panel-profile .skills-panel > h2{ display:none } /* hide old title, we render inside profile */

.pp-search-wrap{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:14px;
  box-shadow:none;
  padding:10px 10px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.pp-search-top{
  display:flex;
  gap:8px;
  align-items:center;
}
.pp-search-top .input{
  flex:1 1 auto;
  font-weight:800;
  font-size:16px;
  background:var(--surface);
}
.pp-btn{
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--surface);
  box-shadow:none;
  font-family:ui-monospace,monospace;
  font-weight:900;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 12px;
  min-height:44px;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pp-btn:active{ transform:translate(1px,1px); box-shadow:none }
.pp-btn--ink{ background:#1A150F; color:#fff }
.pp-btn--yellow{ background:#F0E442; color:var(--fg) }
.pp-quick-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.pp-quick-label{
  font-family:ui-monospace,monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-right:2px;
}
.pp-quick-chip{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:3px 9px;
  background:var(--surface);
  font-family:ui-monospace,monospace;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
  transition:transform .08s;
}
.pp-quick-chip:hover{ background:#F0E442; transform:translateY(-1px) }
.pp-quick-chip:active{ transform:translate(1px,1px); box-shadow:0 0 0 #1A150F }

.pp-suggest{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pp-suggest li{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  box-shadow:none;
  overflow:hidden;
}
.pp-suggest button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:ui-sans-serif,system-ui;
}
.pp-suggest button:hover{ background:var(--surface) }
.pp-suggest__name{ font-weight:900; font-size:14px }
.pp-suggest__meta{ font-family:ui-monospace,monospace; font-size:10px; color:var(--fg-3) }

#players-panel-profile #skills-suggest{ 
  list-style:none; margin:0; padding:0; 
  display:flex; flex-direction:column; gap:6px;
  max-height:320px; overflow:auto;
}
#players-panel-profile #skills-suggest li{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  box-shadow:none;
  padding:0;
}
#players-panel-profile #skills-suggest li button{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}
#players-panel-profile #skills-suggest li button:hover{ background:var(--surface) }
.skills-suggest__meta{ font-family:ui-monospace,monospace; font-size:10px; color:var(--fg-3) }

/* ── Profile shell when loaded ── */
#skills-profile[hidden]{ display:none !important }
#skills-profile{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pp-shell{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  box-shadow:none;
  padding:12px 12px 14px;
  overflow:hidden;
}
.pp-hero{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:14px;
  box-shadow:none;
  padding:12px 14px 10px;
  position:relative;
  overflow:hidden;
}
.pp-hero::after{
  content:'';
  position:absolute;
  right:-22px;
  top:-22px;
  width:84px; height:84px;
  background:radial-gradient(circle at 30% 30%, #F0E442 0 18%, #1A150F 18% 20%, transparent 20%);
  opacity:.18;
  transform:rotate(12deg);
}
.pp-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 10px;
  position:relative;
  z-index:1;
}
.pp-name{
  font-family:ui-monospace,monospace;
  font-size:clamp(26px,5vw,38px);
  line-height:.95;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
}
.pp-grade-mega{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:2px 10px;
  background:#1A150F;
  color:#fff;
  font-family:ui-monospace,monospace;
  font-weight:900;
  font-size:12px;
  box-shadow:2px 2px 0 rgba(26,21,15,.18);
}
.pp-grade-mega b{ font-size:15px; color:#F0E442 }
.pp-meta-line{
  font-family:ui-monospace,monospace;
  font-size:11px;
  line-height:1.5;
  color:var(--fg-2);
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  position:relative;
  z-index:1;
}
.pp-meta-pill{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:2px 8px;
  background:var(--surface);
  font-weight:800;
  font-size:10.5px;
  display:inline-flex;
  gap:5px;
  align-items:center;
  box-shadow:none;
}
.pp-meta-pill--arch{
  background:#1A150F;
  color:#fff;
}
.pp-meta-pill .kdot{ width:7px; height:7px; border-radius:50%; display:inline-block }

.pp-seasons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
  position:relative;
  z-index:1;
}
.pp-seasons button{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:5px 10px;
  background:var(--surface);
  font-family:ui-monospace,monospace;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
  min-height:32px;
}
.pp-seasons button.is-active{
  background:#1A150F;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:none;
}

.pp-rarity-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  position:relative;
  z-index:1;
}
.pp-rarity{
  border:1px dashed var(--line-2);
  border-radius:10px;
  padding:6px 9px;
  background:var(--surface);
  font-family:ui-monospace,monospace;
  font-size:10.5px;
  line-height:1.35;
}
.pp-rarity b{ font-size:12px }
.pp-rarity--gold{ background:#F0E442; border-style:solid }
.pp-rarity--blue{ background:#D6EFFF; }

/* sections */
.pp-section{
  margin-top:2px;
}
.pp-section-head{
  font-family:ui-monospace,monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-2);
  margin:14px 2px 8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.pp-section-head::after{
  content:'';
  flex:1 1 auto;
  height:1.5px;
  background:#E9E2D6;
}

/* badges grid */
.pp-badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:8px;
}
.pp-badge{
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:8px 10px 7px;
  background:var(--surface);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  overflow:hidden;
  transition:transform .12s;
}
.pp-badge:hover{ transform:translateY(-1px) rotate(.2deg); }
.pp-badge__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
}
.pp-badge__name{
  font-family:ui-monospace,monospace;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.15;
}
.pp-badge__grade{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:1px 7px;
  font-family:ui-monospace,monospace;
  font-size:12px;
  font-weight:900;
  background:var(--surface);
  min-width:28px;
  text-align:center;
}
.pp-badge__bar{
  height:6px;
  background:#EEE8D9;
  border-radius:999px;
  border:1px solid var(--line-2);
  overflow:hidden;
}
.pp-badge__fill{ height:100%; border-radius:999px }
.pp-badge--gold{
  background:var(--surface);
  border-color:var(--line-2);
}
.pp-badge--gold .pp-badge__grade{
  background:#F0E442;
  color:var(--fg);
}
.pp-badge--gold::before{
  content:'★';
  position:absolute;
  right:6px;
  top:2px;
  font-size:10px;
  opacity:.35;
}
.pp-badge--muted{
  border-style:dashed;
  opacity:.75;
}

/* skills grid — 2 col */
.pp-skills-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
@media(max-width:760px){
  .pp-skills-grid{ grid-template-columns:1fr }
  .pp-badges-grid{ grid-template-columns:1fr 1fr }
}
@media(max-width:420px){
  .pp-badges-grid{ grid-template-columns:1fr }
}
.pp-skill{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  box-shadow:none;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}
.pp-skill__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.pp-skill__label{
  font-family:ui-monospace,monospace;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--fg);
}
.pp-skill__grade{
  font-family:ui-monospace,monospace;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:1px 8px;
  background:var(--surface);
  min-width:34px;
  text-align:center;
}
.pp-skill__grade--gold{ background:#F0E442; color:var(--fg) }
.pp-skill__grade--blue{ background:#0072B2; color:#fff; border-color:#0072B2 }
.pp-skill__grade--green{ background:#00775A; color:#fff; border-color:#00775A }  /* white on it = 5.55:1 (was 3.42:1 on #009E73) */
.pp-skill__grade--mid{ background:var(--surface); color:var(--fg) }
.pp-skill__grade--low{ background:#EEE8D9; color:var(--fg-2) }

.pp-skill__track{
  height:8px;
  background:#F2EFE6;
  border-radius:999px;
  border:1px solid var(--line-2);
  overflow:hidden;
  position:relative;
}
.pp-skill__fill{
  height:100%;
  border-radius:999px;
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.pp-skill__fill--gold{ background:#1A150F; }
.pp-skill__fill--gold::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, #F0E442 0 0);
  mix-blend:overlay;
  opacity:.9;
}
.pp-skill__foot{
  font-family:ui-monospace,monospace;
  font-size:9.5px;
  color:var(--fg-2);
  display:flex;
  justify-content:space-between;
}


/* v28 hotfix: override legacy .skillbar-list li from unified.css that was collapsing tracks */
.skillbar-list.pp-skills-grid li.pp-skill,
#skills-bars.pp-skills-grid .pp-skill,
.pp-skills-grid .pp-skill {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
}
.pp-skills-grid .pp-skill__track {
  width:100% !important;
  min-width:0;
}

/* wide tracking section */
.pp-wide-head{
  margin-top:12px;
}
.pp-skill--wide{
  background:var(--surface);
}

/* discovery footer */
.pp-discover{
  margin-top:12px;
  border:1px solid var(--line-2);
  border-radius:14px;
  background:#12100C;
  color:#FFFEF7;
  padding:12px 14px;
  box-shadow:none;
}
.pp-discover__title{
  font-family:ui-monospace,monospace;
  font-size:18px;
  line-height:1.1;
  margin:0 0 4px;
}
.pp-discover__sub{
  font-family:ui-monospace,monospace;
  font-size:11px;
  color:#C9C2B4;
  margin:0 0 10px;
}
.pp-discover__row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.pp-discover__chip{
  border:1.6px solid #FFFEF7;
  border-radius:999px;
  padding:5px 10px;
  background:transparent;
  color:#FFFEF7;
  font-family:ui-monospace,monospace;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.pp-discover__chip:hover{ background:var(--surface); color:var(--fg) }

/* MTNN + playoffs polish */
#skills-mtnn, #skills-next-profile, #skills-playoffs{
  border:1px solid var(--line-2);
  border-radius:14px;
  background:var(--surface);
  box-shadow:none;
  padding:12px 12px;
  margin-top:12px;
}
#skills-mtnn .vh-section-label,
#skills-next-profile .vh-section-label,
#skills-playoffs .vh-section-label{
  font-family:ui-monospace,monospace;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.skills-mtnn__list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px }
.skills-mtnn__list li{
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:7px 10px;
  background:var(--surface);
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.skills-mtnn__list a{ font-weight:800; text-decoration:none; color:var(--fg) }
.skills-mtnn__meta{ font-family:ui-monospace,monospace; font-size:10px; color:var(--fg-3) }

/* empty state featured */
.pp-featured{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;
  margin-top:10px;
}
.pp-featured__card{
  border:1px solid var(--line-2);
  border-radius:12px;
  background:var(--surface);
  box-shadow:none;
  padding:9px 10px;
  cursor:pointer;
  transition:transform .1s;
}
.pp-featured__card:hover{ transform:translateY(-2px) rotate(.3deg); background:var(--surface) }
.pp-featured__name{ font-weight:900; font-size:13px }
.pp-featured__line{ font-family:ui-monospace,monospace; font-size:10px; color:var(--fg-3); margin-top:2px }
.pp-featured__grade{ margin-top:6px; display:inline-block; border:1px solid var(--line-2); border-radius:999px; padding:1px 7px; background:#F0E442; font-family:ui-monospace,monospace; font-size:11px; font-weight:900 }

@media (prefers-reduced-motion: reduce){
  .pp-drawer, .pp-drawer *, .player-profile, .player-profile *{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}