/* =========================================================
   BOOM TRAINER PORTAL
   ACHIEVEMENTS // TROPHY VAULT V2
   ========================================================= */

.portal-trophy-real {
  position: relative;
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 46px);

  color: #edf5f7;

  font-family:
    Rajdhani,
    system-ui,
    sans-serif;
}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

.portal-trophy-real::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(61, 223, 240, .07),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(139, 91, 255, .08),
      transparent 28%
    ),
    radial-gradient(
      circle at 52% 68%,
      rgba(247, 196, 57, .035),
      transparent 34%
    );
}


/* =========================================================
   HERO
   ========================================================= */

.portal-trophy-real .pt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 310px;

  padding:
    clamp(28px, 4vw, 56px);

  border:
    1px solid rgba(74, 220, 237, .24);

  border-radius:
    26px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 26, 38, .98),
      rgba(8, 17, 31, .99) 55%,
      rgba(20, 13, 38, .98)
    );

  box-shadow:
    0 28px 80px rgba(0, 0, 0, .28),
    inset 0 1px rgba(255, 255, 255, .035);
}


.portal-trophy-real .pt-hero::before {
  content: "";

  position: absolute;
  z-index: -1;

  width: 560px;
  height: 560px;

  top: -310px;
  right: -130px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 211, 76, .24),
      rgba(139, 89, 255, .10) 38%,
      transparent 68%
    );
}


.portal-trophy-real .pt-hero::after {
  content: "🏆";

  position: absolute;

  top: 28px;
  right: clamp(24px, 6vw, 90px);

  font-size:
    clamp(90px, 12vw, 185px);

  line-height: 1;

  opacity: .09;

  filter:
    drop-shadow(
      0 18px 45px
      rgba(255, 205, 58, .24)
    );

  transform:
    rotate(7deg);

  pointer-events: none;
}


.portal-trophy-real .pt-hero > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 11px;

  border:
    1px solid rgba(89, 220, 233, .23);

  border-radius: 999px;

  background:
    rgba(46, 196, 216, .055);

  color: #62ddeb;

  font:
    900 .53rem/1
    Orbitron,
    sans-serif;

  letter-spacing: .11em;
}


.portal-trophy-real .pt-hero > span::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #59dce9;

  box-shadow:
    0 0 14px
    rgba(89, 220, 233, .9);
}


.portal-trophy-real .pt-hero h1 {
  max-width: 850px;

  margin:
    18px 0 11px;

  color: #f3f8f9;

  font:
    900 clamp(2.6rem, 5.4vw, 5.6rem)/.88
    Orbitron,
    sans-serif;

  letter-spacing: -.055em;

  text-transform: uppercase;
}


.portal-trophy-real .pt-hero h1 b {
  position: relative;

  color: #ffd44d;

  text-shadow:
    0 0 28px
    rgba(255, 202, 57, .18);
}


.portal-trophy-real .pt-hero h1 b::after {
  content: "";

  position: absolute;

  left: 1%;
  right: 1%;
  bottom: -8px;

  height: 3px;

  border-radius: 99px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #f8c83e,
      transparent
    );
}


.portal-trophy-real .pt-hero > p {
  max-width: 730px;

  margin: 20px 0 0;

  color: #8399a3;

  font-size:
    clamp(.88rem, 1.2vw, 1.05rem);

  font-weight: 700;

  line-height: 1.55;
}


/* =========================================================
   TRAINER ID
   ========================================================= */

.portal-trophy-real .pt-user {
  width: fit-content;

  margin-top: 24px;

  padding: 10px 14px;

  border:
    1px solid #284754;

  border-radius: 10px;

  background:
    linear-gradient(
      120deg,
      #061720,
      rgba(8, 26, 37, .82)
    );

  color: #dbe8eb;

  font:
    900 .58rem/1
    Orbitron,
    sans-serif;

  letter-spacing: .045em;

  box-shadow:
    inset 3px 0 #59dce9;
}


/* =========================================================
   STATS
   ========================================================= */

.portal-trophy-real .pt-stats {
  position: relative;
  z-index: 2;

  max-width: 920px;

  margin-top: 28px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;
}


.portal-trophy-real .pt-stats > div {
  position: relative;
  overflow: hidden;

  min-height: 92px;

  padding: 14px 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border:
    1px solid #23424e;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 24, 32, .95),
      rgba(5, 16, 23, .94)
    );
}


.portal-trophy-real .pt-stats > div::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #59dce9;

  opacity: .7;
}


.portal-trophy-real .pt-stats > div:nth-child(2)::before {
  background: #ffd44e;
}


.portal-trophy-real .pt-stats > div:nth-child(3)::before {
  background: #5be0ad;
}


.portal-trophy-real .pt-stats > div:nth-child(4)::before {
  background: #9572ff;
}


.portal-trophy-real .pt-stats strong {
  display: block;

  color: #f2f7f8;

  font:
    900 clamp(1.18rem, 2vw, 1.55rem)/1
    Orbitron,
    sans-serif;
}


.portal-trophy-real .pt-stats > div:nth-child(2) strong {
  color: #ffd351;
}


.portal-trophy-real .pt-stats > div:nth-child(3) strong {
  color: #64dfb0;
}


.portal-trophy-real .pt-stats > div:nth-child(4) strong {
  color: #a58cff;
}


.portal-trophy-real .pt-stats span {
  display: block;

  margin-top: 7px;

  color: #718891;

  font:
    900 .42rem/1.2
    Orbitron,
    sans-serif;

  letter-spacing: .07em;
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.portal-trophy-real .pt-filter {
  position: sticky;
  z-index: 15;

  top: 10px;

  margin: 18px 0 14px;

  padding: 9px;

  display: flex;
  gap: 7px;
  flex-wrap: wrap;

  border:
    1px solid rgba(44, 79, 91, .94);

  border-radius: 13px;

  background:
    rgba(5, 17, 24, .92);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, .18);
}


.portal-trophy-real .pt-filter button {
  min-height: 34px;

  padding:
    0 13px;

  border:
    1px solid #273f4a;

  border-radius: 8px;

  background:
    #091821;

  color: #80939d;

  font:
    900 .44rem/1
    Orbitron,
    sans-serif;

  letter-spacing: .055em;

  cursor: pointer;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}


.portal-trophy-real .pt-filter button:hover {
  transform:
    translateY(-1px);

  border-color:
    #3a6978;

  color:
    #c6d9df;
}


.portal-trophy-real .pt-filter button.active {
  border-color:
    #5bdce9;

  background:
    linear-gradient(
      90deg,
      #4fd4e1,
      #69e4ed
    );

  color:
    #041016;

  box-shadow:
    0 5px 18px
    rgba(71, 215, 230, .15);
}


/* =========================================================
   GRID
   ========================================================= */

.portal-trophy-real .pt-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(245px, 1fr)
    );

  gap: 11px;
}


/* =========================================================
   ACHIEVEMENT CARD
   ========================================================= */

.portal-trophy-real .pt-card {
  position: relative;

  min-height: 345px;

  padding: 15px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid #203b46;

  border-radius:
    15px;

  background:
    linear-gradient(
      150deg,
      rgba(10, 27, 39, .98),
      rgba(5, 15, 23, .99)
    );

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .018);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


.portal-trophy-real .pt-card::before {
  content: "";

  position: absolute;

  left: -20%;
  right: -20%;
  bottom: -80px;

  height: 140px;

  background:
    radial-gradient(
      ellipse,
      rgba(74, 210, 230, .06),
      transparent 68%
    );

  pointer-events: none;
}


.portal-trophy-real .pt-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #315966;

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, .19),
    inset 0 1px
    rgba(255, 255, 255, .025);
}


/* unlocked */

.portal-trophy-real .pt-card.unlocked {
  border-color:
    rgba(69, 190, 158, .33);
}


.portal-trophy-real .pt-card.unlocked::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #57deae,
      transparent
    );
}


/* claimable */

.portal-trophy-real .pt-card.claimable {
  border-color:
    rgba(230, 182, 58, .55);

  box-shadow:
    inset 0 2px
    rgba(255, 211, 78, .8),
    0 13px 40px
    rgba(111, 77, 7, .10);
}


.portal-trophy-real .pt-card.claimable::before {
  background:
    radial-gradient(
      ellipse,
      rgba(255, 205, 68, .14),
      transparent 70%
    );
}


/* locked */

.portal-trophy-real .pt-card.locked {
  opacity: .68;

  filter:
    saturate(.65);
}


.portal-trophy-real .pt-card.locked:hover {
  opacity: .86;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.portal-trophy-real .pt-card > header {
  min-height: 29px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
}


.portal-trophy-real .pt-card > header span,
.portal-trophy-real .pt-card > header b {
  padding:
    5px 7px;

  border:
    1px solid #294650;

  border-radius:
    999px;

  background:
    #06151c;

  color:
    #73dbe5;

  font:
    900 .37rem/1
    Orbitron,
    sans-serif;

  letter-spacing:
    .055em;
}


.portal-trophy-real .pt-card > header b {
  color:
    #6c818a;
}


.portal-trophy-real .pt-card.unlocked > header b {
  border-color:
    rgba(75, 218, 168, .30);

  color:
    #5fe0ae;
}


.portal-trophy-real .pt-card.claimable > header b {
  border-color:
    rgba(255, 207, 68, .38);

  color:
    #ffd04d;
}


/* =========================================================
   TROPHY ICON
   ========================================================= */

.portal-trophy-real .pt-icon {
  width: 58px;
  height: 58px;

  margin-top: 21px;

  display: grid;
  place-items: center;

  border:
    1px solid #294852;

  border-radius:
    15px;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(92, 224, 235, .13),
      rgba(5, 18, 24, .95)
    );

  font-size: 1.9rem;

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .035);
}


.portal-trophy-real .pt-card.claimable .pt-icon {
  border-color:
    rgba(255, 207, 69, .42);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 203, 64, .20),
      rgba(23, 17, 6, .94)
    );

  box-shadow:
    0 0 25px
    rgba(255, 202, 58, .08);
}


/* =========================================================
   CARD COPY
   ========================================================= */

.portal-trophy-real .pt-card h3 {
  margin:
    15px 0 7px;

  color:
    #e8f1f3;

  font:
    900 .72rem/1.28
    Orbitron,
    sans-serif;

  letter-spacing:
    .018em;

  text-transform:
    uppercase;
}


.portal-trophy-real .pt-card p {
  min-height: 46px;

  margin: 0;

  color:
    #7b929c;

  font-size:
    .78rem;

  font-weight:
    700;

  line-height:
    1.42;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.portal-trophy-real .pt-bar {
  position: relative;

  height: 8px;

  margin-top: auto;

  overflow: hidden;

  border:
    1px solid rgba(37, 69, 82, .75);

  border-radius:
    999px;

  background:
    #031015;

  box-shadow:
    inset 0 1px 4px
    rgba(0, 0, 0, .65);
}


.portal-trophy-real .pt-bar i {
  display: block;

  height: 100%;

  min-width: 3px;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #4fd4e0,
      #7c82ff
    );

  box-shadow:
    0 0 12px
    rgba(80, 216, 231, .26);
}


.portal-trophy-real .pt-card.claimable .pt-bar i {
  background:
    linear-gradient(
      90deg,
      #e5ab31,
      #ffd955
    );

  box-shadow:
    0 0 13px
    rgba(255, 203, 60, .30);
}


.portal-trophy-real .pt-card > small {
  margin-top: 7px;

  color:
    #81949d;

  font:
    900 .53rem/1
    Rajdhani,
    sans-serif;

  text-align:
    right;
}


/* =========================================================
   CLAIM BUTTON
   ========================================================= */

.portal-trophy-real .pt-card > button {
  min-height:
    42px;

  margin-top:
    13px;

  padding:
    0 13px;

  border:
    1px solid
    #e0ad35;

  border-radius:
    9px;

  background:
    linear-gradient(
      100deg,
      #dca431,
      #ffd455,
      #e9b439
    );

  color:
    #111006;

  font:
    900 .48rem/1
    Orbitron,
    sans-serif;

  letter-spacing:
    .045em;

  cursor:
    pointer;

  box-shadow:
    0 8px 24px
    rgba(173, 121, 17, .17);

  transition:
    transform .15s ease,
    filter .15s ease;
}


.portal-trophy-real .pt-card > button:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.08);
}


.portal-trophy-real .pt-card > button:active {
  transform:
    translateY(1px);
}


/* =========================================================
   CLAIMED / LOCKED FOOTER
   ========================================================= */

.portal-trophy-real .pt-card footer {
  min-height:
    39px;

  margin-top:
    13px;

  display:
    flex;

  align-items:
    center;

  border-top:
    1px solid #19303a;

  color:
    #55dba7;

  font:
    900 .43rem/1
    Orbitron,
    sans-serif;

  letter-spacing:
    .05em;
}


.portal-trophy-real .pt-card.locked footer {
  color:
    #637881;
}


/* =========================================================
   EMPTY STATES / ERRORS
   ========================================================= */

.portal-trophy-real .portal-feature-loading {
  min-height:
    340px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid #24434e;

  border-radius:
    18px;

  background:
    #071720;

  color:
    #60dce9;

  font:
    900 .6rem
    Orbitron,
    sans-serif;

  letter-spacing:
    .08em;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.portal-trophy-real * {
  scrollbar-width:
    thin;

  scrollbar-color:
    #244753
    #06141b;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media
(max-width: 1050px) {

  .portal-trophy-real .pt-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media
(max-width: 720px) {

  .portal-trophy-real {
    padding:
      14px;
  }


  .portal-trophy-real .pt-hero {
    min-height:
      0;

    padding:
      24px 18px;
  }


  .portal-trophy-real .pt-hero::after {
    right:
      -10px;

    top:
      28px;

    font-size:
      100px;
  }


  .portal-trophy-real .pt-hero h1 {
    font-size:
      clamp(2rem, 12vw, 3.5rem);
  }


  .portal-trophy-real .pt-filter {
    position:
      static;
  }


  .portal-trophy-real .pt-grid {
    grid-template-columns:
      1fr;
  }

}


@media
(max-width: 480px) {

  .portal-trophy-real .pt-stats {
    grid-template-columns:
      1fr 1fr;
  }


  .portal-trophy-real .pt-filter button {
    flex:
      1 1 calc(50% - 6px);
  }

}