#tab-player #profile-points-dynamic{
  padding:0;
  background:transparent;
}

#tab-player .pp23-shell{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:
    0 18px 55px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
}

#tab-player .pp23-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:26px 28px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(600px 180px at 0 0,rgba(0,214,255,.08),transparent 65%),
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 55%);
}

#tab-player .pp23-hero::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-70px;
  top:-130px;
  border-radius:50%;
  background:rgba(0,220,255,.06);
  filter:blur(55px);
  pointer-events:none;
}

#tab-player .pp23-hero-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

#tab-player .pp23-hero-copy > span{
  color:#70808e;
  font-size:10px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#tab-player .pp23-hero-copy strong{
  color:#f4f7fa;
  font-size:23px;
  font-weight:750;
  letter-spacing:-.025em;
}

#tab-player .pp23-hero-copy small{
  color:#788692;
  font-size:12px;
}

#tab-player .pp23-overview{
  display:flex;
  align-items:center;
  gap:34px;
}

#tab-player .pp23-overview > div{
  min-width:90px;
}

#tab-player .pp23-overview span,
#tab-player .pp23-metric span{
  display:block;
  margin-bottom:5px;
  color:#687684;
  font-size:9px;
  font-weight:750;
  letter-spacing:.10em;
  text-transform:uppercase;
}

#tab-player .pp23-overview strong{
  color:#f4f8fb;
  font-size:22px;
  font-weight:760;
  font-variant-numeric:tabular-nums;
}

#tab-player .pp23-overview em{
  margin-left:4px;
  color:#66727d;
  font-size:12px;
  font-style:normal;
  font-weight:600;
}

#tab-player .pp23-board{
  background:rgba(3,7,11,.20);
}

#tab-player .pp23-board-head,
#tab-player .pp23-category > summary{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 100px 100px 110px 28px;
  align-items:center;
  gap:12px;
}

#tab-player .pp23-board-head{
  padding:11px 22px;
  color:#667482;
  font-size:9px;
  font-weight:750;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.05);
}

#tab-player .pp23-board-head span:not(:first-child){
  text-align:right;
}

#tab-player .pp23-category{
  border-bottom:1px solid rgba(255,255,255,.055);
}

#tab-player .pp23-category:last-child{
  border-bottom:0;
}

#tab-player .pp23-category > summary{
  min-height:66px;
  padding:0 22px;
  list-style:none;
  cursor:pointer;
  transition:background .15s ease;
}

#tab-player .pp23-category > summary::-webkit-details-marker{
  display:none;
}

#tab-player .pp23-category > summary:hover,
#tab-player .pp23-category[open] > summary{
  background:rgba(255,255,255,.025);
}

#tab-player .pp23-category-name{
  display:flex;
  align-items:center;
  gap:12px;
}

#tab-player .pp23-category-name strong{
  color:#eef3f7;
  font-size:14px;
  font-weight:700;
}

#tab-player .pp23-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pp23-color);
  box-shadow:0 0 12px var(--pp23-color);
}

#tab-player .pp23-metric{
  text-align:right;
}

#tab-player .pp23-metric strong{
  color:#edf2f6;
  font-size:15px;
  font-weight:720;
  font-variant-numeric:tabular-nums;
}

#tab-player .pp23-chevron{
  color:#75818c;
  text-align:right;
  transition:transform .15s ease;
}

#tab-player .pp23-category[open] .pp23-chevron{
  transform:rotate(180deg);
}

#tab-player .pp23-body{
  padding:16px 22px 20px;
  border-top:1px solid rgba(255,255,255,.045);
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}

#tab-player .pp23-body-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

#tab-player .pp23-switch{
  display:inline-flex;
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

#tab-player .pp23-switch button{
  display:flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding:0 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#778591;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

#tab-player .pp23-switch button.active{
  color:#eef3f7;
  background:rgba(255,255,255,.07);
}

#tab-player .pp23-switch b{
  color:#a7b2bc;
  font-size:10px;
}

#tab-player .pp23-hint{
  color:#64717c;
  font-size:10px;
}

#tab-player .pp23-pane[hidden]{
  display:none;
}

#tab-player .pp23-map{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  align-items:center;
  gap:22px;
  min-height:58px;
  padding:11px 4px;
  border-top:1px solid rgba(255,255,255,.045);
}

#tab-player .pp23-map:first-child{
  border-top:0;
}

#tab-player .pp23-map-name{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

#tab-player .pp23-map-check{
  color:#54dc8e;
  font-size:12px;
  font-weight:800;
}

#tab-player .pp23-map-name > div{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#tab-player .pp23-map-name strong{
  overflow:hidden;
  color:#e8edf2;
  font-size:13px;
  font-weight:680;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#tab-player .pp23-map-name span:last-child{
  margin-top:3px;
  color:#66737e;
  font-size:10px;
}

#tab-player .pp23-fps{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:5px;
}

#tab-player .pp23-fps-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  height:22px;
  padding:0 7px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.045);
  background:rgba(255,255,255,.018);
  color:#596570;
  font-size:10px;
  font-weight:720;
}

#tab-player .pp23-fps-chip.done,
#tab-player .pp23-single-state.done{
  color:#55df91;
  border-color:rgba(85,223,145,.20);
  background:rgba(64,184,108,.10);
}

#tab-player .pp23-single-state{
  justify-self:end;
  padding:5px 10px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.05);
  color:#687580;
  font-size:10px;
  font-weight:700;
}

#tab-player .pp23-empty{
  padding:18px 4px;
  color:#6c7984;
  font-size:12px;
}

#tab-player .pp23-season-tabs{
  display:flex;
  gap:2px;
  padding:3px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:rgba(255,255,255,.02);
}

#tab-player .pp23-season-tabs button{
  height:29px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#6e7a86;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

#tab-player .pp23-season-tabs button.active{
  color:#00e5ff;
  background:rgba(0,229,255,.08);
}

@media(max-width:800px){
  #tab-player .pp23-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  #tab-player .pp23-overview{
    width:100%;
    justify-content:space-between;
  }

  #tab-player .pp23-board-head{
    display:none;
  }

  #tab-player .pp23-category > summary{
    grid-template-columns:1fr 65px 65px 75px 22px;
    padding:0 14px;
  }

  #tab-player .pp23-map{
    grid-template-columns:1fr;
    gap:9px;
  }

  #tab-player .pp23-fps{
    justify-content:flex-start;
    padding-left:23px;
  }
}



/* POINTS-V231-RETRY */

/* Connect outer POINTS header with V23 content */
#tab-player .profile-grid > .profile-card:first-child
.profile-card-head{
  border-bottom:0;
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.025),
      rgba(0,214,255,.012) 65%,
      transparent
    );
}

#tab-player .profile-grid > .profile-card:first-child
.profile-card-body{
  background:transparent;
}

#tab-player .pp23-shell{
  border-top:
    1px solid rgba(255,255,255,.045);

  border-left:0;
  border-right:0;
  border-bottom:0;

  border-radius:0;

  box-shadow:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.006)
    );
}

#tab-player .pp23-hero{
  padding:18px 28px;

  background:
    radial-gradient(
      650px 180px at 0 -50px,
      rgba(0,214,255,.06),
      transparent 68%
    ),
    linear-gradient(
      120deg,
      rgba(255,255,255,.022),
      transparent 60%
    );
}

#tab-player .pp23-hero-copy{
  gap:5px;
}

#tab-player .pp23-hero-copy > span{
  color:#8b98a4;
  font-size:10px;
  font-weight:750;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#tab-player .pp23-hero-copy small{
  color:#6d7b87;
  font-size:11px;
}


/* --------------------------------------------------------
   Stable chevron:
   fixed 28x28 box, rotate pseudo-element only
   -------------------------------------------------------- */

#tab-player .pp23-chevron{
  position:relative;

  width:28px;
  height:28px;

  display:block;

  justify-self:end;

  color:transparent !important;

  transform:none !important;
  transition:none !important;
}

#tab-player .pp23-chevron::before{
  content:"⌄";

  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#75818c;

  font-size:14px;
  line-height:1;

  transform:rotate(0deg);
  transform-origin:center;

  transition:
    transform .16s ease,
    color .16s ease;
}

#tab-player .pp23-category[open]
.pp23-chevron{
  transform:none !important;
}

#tab-player .pp23-category[open]
.pp23-chevron::before{
  transform:rotate(180deg);
  color:#9aa6b1;
}


/* --------------------------------------------------------
   Map state
   Completed     = green check
   Not completed = grey circle
   -------------------------------------------------------- */

#tab-player .pp23-map-check{
  width:16px;
  height:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 16px;

  font-size:0 !important;

  color:transparent !important;
}

#tab-player
.pp23-pane[data-view="completed"]
.pp23-map-check::before{
  content:"✓";

  color:#54dc8e;

  font-size:12px;
  font-weight:800;
}

#tab-player
.pp23-pane[data-view="missing"]
.pp23-map-check::before{
  content:"○";

  color:#5e6a75;

  font-size:14px;
  font-weight:700;
}



/* POINTS-V233-ALIGN */

@media(min-width:801px){

  #tab-player .pp23-hero,
  #tab-player .pp23-category > summary{
    display:grid;

    grid-template-columns:
      minmax(220px,1fr)
      100px
      100px
      110px
      28px;

    column-gap:12px;
    align-items:center;
  }

  #tab-player .pp23-hero-copy{
    grid-column:1;
  }

  #tab-player .pp23-overview{
    display:contents;
  }

  #tab-player .pp23-overview > div{
    min-width:0;
    text-align:right;
  }

  #tab-player .pp23-overview > div:nth-child(1){
    grid-column:2;
  }

  #tab-player .pp23-overview > div:nth-child(2){
    grid-column:3;
  }

  #tab-player .pp23-overview > div:nth-child(3){
    grid-column:4;
  }

  #tab-player .pp23-category > summary .pp23-metric{
    min-width:0;
    text-align:right;
  }

  #tab-player .pp23-chevron{
    grid-column:5;
    justify-self:end;
  }
}


/* POINTS-V234-FINAL-ALIGN */
@media(min-width:801px){
  #tab-player .pp23-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 94px 94px 108px 28px!important;
    column-gap:18px!important;
  }

  #tab-player .pp23-overview{
    grid-column:2 / 5!important;
    display:grid!important;
    grid-template-columns:94px 94px 108px!important;
    gap:18px!important;
    width:auto!important;
  }

  #tab-player .pp23-overview > div{
    width:auto!important;
    min-width:0!important;
    text-align:right!important;
  }

  #tab-player .pp23-category > summary{
    grid-template-columns:minmax(0,1fr) 94px 94px 108px 28px!important;
    column-gap:18px!important;
  }

  #tab-player .pp23-category > summary .pp23-metric{
    width:auto!important;
    min-width:0!important;
    text-align:right!important;
  }
}


/* POINTS-COLUMNS-V23.5 */

@media(min-width:801px){

  #tab-player .pp23-shell{
    --pp23-col-maps:94px;
    --pp23-col-runs:94px;
    --pp23-col-points:108px;
    --pp23-col-chevron:28px;
    --pp23-col-gap:18px;
  }

  /*
    Hero and every category row now use EXACTLY
    the same 5-column grid.
  */
  #tab-player .pp23-hero,
  #tab-player .pp23-category > summary{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      var(--pp23-col-maps)
      var(--pp23-col-runs)
      var(--pp23-col-points)
      var(--pp23-col-chevron) !important;

    column-gap:var(--pp23-col-gap) !important;

    align-items:center !important;

    padding-left:28px !important;
    padding-right:28px !important;
  }

  /* left side */
  #tab-player .pp23-hero-copy{
    grid-column:1 !important;
    min-width:0 !important;
  }

  /*
    MAPS / RUNS / POINTS from hero enter
    the exact same columns as category metrics.
  */
  #tab-player .pp23-overview{
    display:contents !important;
  }

  #tab-player .pp23-overview > div{
    width:auto !important;
    min-width:0 !important;

    justify-self:stretch !important;
    text-align:right !important;
  }

  #tab-player .pp23-overview > div:nth-child(1){
    grid-column:2 !important;
  }

  #tab-player .pp23-overview > div:nth-child(2){
    grid-column:3 !important;
  }

  #tab-player .pp23-overview > div:nth-child(3){
    grid-column:4 !important;
  }

  /*
    Category metrics use identical alignment.
    Natural DOM order puts them into columns 2/3/4.
  */
  #tab-player .pp23-category > summary .pp23-metric{
    width:auto !important;
    min-width:0 !important;

    justify-self:stretch !important;
    text-align:right !important;
  }

  /* chevron always gets its own reserved column */
  #tab-player .pp23-category > summary .pp23-chevron{
    grid-column:5 !important;

    width:28px !important;
    min-width:28px !important;

    justify-self:end !important;
  }
}