/*
 * JLPT180 Profile CSS owner.
 * P3.3: moved from includes/clean-styles.php.
 * Scope: #view-profile / .pf-* only.
 * Do not add profile CSS back to clean-styles.php.
 */

body.jlpt180-clean-lobby #view-profile.jlpt-profile-exact,
body.jlpt180-clean-lobby #view-profile.jlpt-profile-exact *{
  box-sizing: border-box;
  letter-spacing: 0;
}

body.jlpt180-clean-lobby #view-profile.jlpt-profile-exact{
  --pf-page-max: 430px;
  --pf-page-columns: 1fr;
  --pf-page-gap: 12px;
  --pf-hero-min-height: 360px;
  color: #073451;
  background: transparent;
}

body.jlpt180-clean-lobby #view-profile .pf-scroll{
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 10px 74px;
}

body.jlpt180-clean-lobby #view-profile .pf-page{
  width: min(var(--pf-page-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--pf-page-columns);
  gap: var(--pf-page-gap);
}

body.jlpt180-clean-lobby #view-profile .pf-hero-zone,
body.jlpt180-clean-lobby #view-profile .pf-stat-zone,
body.jlpt180-clean-lobby #view-profile .pf-skill-zone,
body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
  border: 2px solid rgba(83, 225, 245, .9);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(227,255,248,.92));
  box-shadow: 0 10px 24px rgba(4,72,106,.14), inset 0 0 0 1px rgba(255,255,255,.84);
}

body.jlpt180-clean-lobby #view-profile .pf-hero-zone{
  position: relative;
  min-height: var(--pf-hero-min-height);
  padding: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(232,255,255,.28), rgba(220,255,224,.16)), var(--jlpt-bg-stage) center / cover no-repeat;
}

body.jlpt180-clean-lobby #view-profile .pf-stage-bg{
  position: absolute;
  left: 13%;
  right: 9%;
  bottom: 58px;
  height: 42%;
  background: var(--jlpt-bg-glow) center / contain no-repeat;
  filter: none;
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-nameplate{
  position: relative;
  z-index: 7;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 76px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  text-align: center;
  box-shadow: 0 8px 18px rgba(4,72,106,.1);
}

body.jlpt180-clean-lobby #view-profile .pf-char-name{
  max-width: 100%;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px #00eaff, 0 0 14px #7a4dff, 0 0 22px #ff55d7, 0 2px 0 rgba(5,35,83,.45);
}

body.jlpt180-clean-lobby #view-profile .pf-rank-badge{
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 5px #ffe56b, 0 0 12px #35f7ff, 0 0 18px #7d4dff, 0 1px 0 rgba(5,35,83,.45);
}

body.jlpt180-clean-lobby #view-profile .pf-doll{
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  width: 164px;
  height: 164px;
  transform: translate(-50%, -50%);
  filter: none;
}

body.jlpt180-clean-lobby #view-profile .pf-doll img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.jlpt180-clean-lobby #view-profile .pf-companion{
  position: absolute;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 4px;
}

body.jlpt180-clean-lobby #view-profile .pf-pet{
  left: 18px;
  bottom: 26px;
}

body.jlpt180-clean-lobby #view-profile .pf-weapon{
  right: 18px;
  bottom: 26px;
}

body.jlpt180-clean-lobby #view-profile .pf-asset-wrap,
  body.jlpt180-clean-lobby #view-profile .pf-weapon-orb{
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 16px rgba(4,72,106,.14);
}

body.jlpt180-clean-lobby #view-profile .pf-pet-img,
body.jlpt180-clean-lobby #view-profile .pf-weapon-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.jlpt180-clean-lobby #view-profile .pf-placeholder{
  font-size: 34px;
}

body.jlpt180-clean-lobby #view-profile .pf-item-label span{
  min-height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(92,83,213,.95), rgba(25,188,196,.95));
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-zone{
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tuchat ngotinh"
    "linhthach tuvi";
  gap: 10px;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-origin{ grid-area: tuchat; }
body.jlpt180-clean-lobby #view-profile .pf-stat-ngotinh{ grid-area: ngotinh; }
body.jlpt180-clean-lobby #view-profile .pf-stat-linhthach{ grid-area: linhthach; }
body.jlpt180-clean-lobby #view-profile .pf-stat-tuvi{ grid-area: tuvi; }

body.jlpt180-clean-lobby #view-profile .pf-stat-card{
  min-height: 76px;
  padding: 10px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(93, 202, 230, .62);
  border-radius: 18px;
  box-shadow: 0 7px 14px rgba(4,72,106,.08);
}

body.jlpt180-clean-lobby #view-profile .pf-stat-origin{ background: linear-gradient(180deg, #fff7c8, #f4e7ff); }
body.jlpt180-clean-lobby #view-profile .pf-stat-ngotinh{ background: linear-gradient(180deg, #e8fff2, #e5f6ff); }
body.jlpt180-clean-lobby #view-profile .pf-stat-linhthach{ background: linear-gradient(180deg, #e6f6ff, #edf7ff); }
body.jlpt180-clean-lobby #view-profile .pf-stat-tuvi{ background: linear-gradient(180deg, #fff1df, #fff8cd); }

body.jlpt180-clean-lobby #view-profile .pf-stat-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--jlpt-crest) center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(7,52,81,.16));
}

body.jlpt180-clean-lobby #view-profile .pf-stat-ngotinh .pf-stat-icon{ background-image: var(--jlpt-stat-energy); }
body.jlpt180-clean-lobby #view-profile .pf-stat-linhthach .pf-stat-icon{ background-image: var(--jlpt-stat-lt); }
body.jlpt180-clean-lobby #view-profile .pf-stat-tuvi .pf-stat-icon{ background-image: var(--jlpt-stat-tuvi); }

body.jlpt180-clean-lobby #view-profile .pf-stat-copy{
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-copy b{
  color: #245e86;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-copy strong{
  color: #073451;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-zone,
body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
  padding: 14px;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-zone h3,
body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3{
  margin: 0 0 12px;
  color: #073451;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-row{
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #e9f9ff);
  color: #0b80d8;
  box-shadow: 0 6px 12px rgba(4,72,106,.1);
}

body.jlpt180-clean-lobby #view-profile .pf-skill-info{
  display: grid;
  gap: 7px;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-info > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-info b,
body.jlpt180-clean-lobby #view-profile .pf-skill-info strong{
  color: #073451;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-skill-info > span{
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(14,96,132,.13);
}

body.jlpt180-clean-lobby #view-profile .pf-skill-info em{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28d8ff, #58ef6f, #ffe063);
}

body.jlpt180-clean-lobby #view-profile .pf-breakthrough{
  margin-top: 12px;
}

body.jlpt180-clean-lobby #view-profile .pf-breakthrough a,
body.jlpt180-clean-lobby #view-profile .pf-breakthrough span{
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #e8ff62, #3adf20);
  color: #073451;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

body.jlpt180-clean-lobby #view-profile .pf-medals{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.jlpt180-clean-lobby #view-profile .pf-medal{
  min-height: 92px;
  position: relative;
  padding: 12px 10px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(93, 202, 230, .62);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,253,255,.9));
  color: #073451;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 7px 14px rgba(4,72,106,.08);
}

body.jlpt180-clean-lobby #view-profile .pf-medal b{
  color: var(--medal-color);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-medal span,
body.jlpt180-clean-lobby #view-profile .pf-medal small{
  font-size: 10px;
  line-height: 1.15;
  font-weight: 900;
}

body.jlpt180-clean-lobby #view-profile .pf-medal.is-locked{
  filter: grayscale(.22);
  opacity: .72;
}


@media (min-width: 900px) {
  body.jlpt180-clean-lobby #view-profile.jlpt-profile-exact{
    --pf-page-max: 960px;
    --pf-page-gap: 16px;
    --pf-hero-min-height: 430px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-scroll{
    padding: 16px 18px 96px;
  }
}

@media (min-width: 1200px) {
  body.jlpt180-clean-lobby #view-profile.jlpt-profile-exact{
    --pf-page-max: 1320px;
    --pf-page-columns: minmax(430px, 500px) minmax(0, 1fr);
    --pf-page-gap: 14px;
    --pf-hero-min-height: 462px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-scroll{
    padding: 10px 18px 74px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-hero-zone{
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: 12px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-zone{
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "tuchat ngotinh"
      "linhthach tuvi";
    grid-auto-rows: minmax(72px, auto);
    gap: 8px;
    align-items: stretch;
    align-content: start;
    padding: 10px;
    overflow: visible;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-origin{
    grid-area: tuchat;
    display: grid;
    visibility: visible;
    opacity: 1;
    position: relative;
    transform: none;
  }
  body.jlpt180-clean-lobby #view-profile .pf-stat-ngotinh{ grid-area: ngotinh; }
  body.jlpt180-clean-lobby #view-profile .pf-stat-linhthach{ grid-area: linhthach; }
  body.jlpt180-clean-lobby #view-profile .pf-stat-tuvi{ grid-area: tuvi; }

  body.jlpt180-clean-lobby #view-profile .pf-stat-card{
    min-height: 72px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-copy{
    gap: 1px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-copy b{
    font-size: 8px;
    line-height: 1.02;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-copy strong{
    font-size: clamp(12px, 0.92vw, 16px);
    line-height: 1.02;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.jlpt180-clean-lobby #view-profile .pf-skill-zone{
    grid-column: 2;
    grid-row: 2;
    padding: 12px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-skill-zone h3{
    margin-bottom: 8px;
    font-size: 17px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-skill-row{
    min-height: 42px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 4px 0;
    gap: 8px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-skill-icon{
    width: 36px;
    height: 36px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-skill-info{
    gap: 4px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-breakthrough{
    margin-top: 8px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-breakthrough a,
  body.jlpt180-clean-lobby #view-profile .pf-breakthrough span{
    min-height: 34px;
    padding: 7px 10px;
    font-size: 10px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
    grid-column: 1 / -1;
    padding-top: 8px;
  }
}


@media (min-width: 900px) {
  body.jlpt180-clean-lobby #view-profile .pf-hero-zone{
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      var(--jlpt-bg-stage) center / cover no-repeat;
  }

  body.jlpt180-clean-lobby #view-profile .pf-stat-zone,
body.jlpt180-clean-lobby #view-profile .pf-skill-zone,
body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(243,250,255,.92)),
      var(--jlpt-bg-sidebar) center / cover no-repeat;
    border-color: rgba(125,211,252,.48);
    box-shadow: 0 16px 34px rgba(4,72,106,.10), inset 0 0 0 1px rgba(255,255,255,.84);
  }


}


body.jlpt180-clean-lobby #view-profile .pf-char-name{
  color: #fff;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: .02em;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #ff1744,
    0 0 20px #ff003c,
    0 0 34px rgba(255, 0, 85, .72),
    0 3px 0 rgba(80, 0, 20, .55);
}

body.jlpt180-clean-lobby #view-profile .pf-nameplate{
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,230,238,.30), rgba(255,255,255,.42));
  border: 1px solid rgba(255, 82, 128, .48);
  box-shadow: 0 12px 28px rgba(255,0,76,.14), inset 0 0 0 1px rgba(255,255,255,.54);
}

body.jlpt180-clean-lobby #view-profile .pf-companion{
  z-index: 4;
}

body.jlpt180-clean-lobby #view-profile .pf-doll{
  z-index: 7;
}

body.jlpt180-clean-lobby #view-profile .pf-pet{
  left: 8%;
  bottom: 18px;
  transform: scale(1.02) rotate(-8deg);
  transform-origin: center bottom;
}

body.jlpt180-clean-lobby #view-profile .pf-weapon{
  right: 7%;
  bottom: 18px;
  transform: scale(1.02) rotate(8deg);
  transform-origin: center bottom;
}

body.jlpt180-clean-lobby #view-profile .pf-asset-wrap,
  body.jlpt180-clean-lobby #view-profile .pf-weapon-orb{
  width: 76px;
  height: 76px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(125,211,252,.45);
  box-shadow: 0 16px 30px rgba(4,72,106,.16), inset 0 0 0 1px rgba(255,255,255,.52);
}

body.jlpt180-clean-lobby #view-profile .pf-item-label{
  transform: scale(.78);
}

body.jlpt180-clean-lobby #view-profile .pf-stat-zone{
  position: relative;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(236,249,255,.82)),
    var(--jlpt-bg-sidebar) center / cover no-repeat;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-width: 1px;
}

body.jlpt180-clean-lobby #view-profile .pf-stat-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .78;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.42));
}

body.jlpt180-clean-lobby #view-profile .pf-stat-origin{
  display: grid;
  visibility: visible;
  opacity: 1;
  background: linear-gradient(135deg, rgba(255,235,135,.86), rgba(226,196,255,.78));
  border-color: rgba(168,85,247,.64);
}

body.jlpt180-clean-lobby #view-profile .pf-stat-ngotinh{
  background: linear-gradient(135deg, rgba(134,239,172,.78), rgba(103,232,249,.68));
  border-color: rgba(20,184,166,.58);
}

body.jlpt180-clean-lobby #view-profile .pf-stat-copy b,
body.jlpt180-clean-lobby #view-profile .pf-stat-copy strong{
  position: relative;
  z-index: 2;
  color: #062a55;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

body.jlpt180-clean-lobby #view-profile .pf-stat-copy strong{
  font-size: clamp(15px, 1.1vw, 18px);
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3{
  color: #062a55;
  font-size: clamp(18px, 1.55vw, 24px);
  letter-spacing: .02em;
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(245, 190, 98, .72);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 225, 154, .30), transparent 30%),
    radial-gradient(circle at 12% 18%, rgba(255, 159, 205, .22), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(125, 211, 252, .22), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,249,241,.82));
  box-shadow:
    0 18px 34px rgba(88, 110, 130, .16),
    0 0 22px rgba(245, 190, 98, .18),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 0 0 1px rgba(255,255,255,.68);
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone::before{
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 24px;
  opacity: .46;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(245,190,98,.42) 49%, rgba(245,190,98,.42) 51%, transparent 56%),
    linear-gradient(0deg, transparent 0 44%, rgba(244,114,182,.20) 49%, rgba(244,114,182,.20) 51%, transparent 56%),
    radial-gradient(circle at 50% 50%, transparent 0 37%, rgba(255,255,255,.0) 38%, rgba(245,190,98,.28) 39%, transparent 42%);
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone::after{
  content: "✦";
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 1;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  background: radial-gradient(circle at 35% 25%, #fff, #f9b4d5 28%, #a855f7 70%, #5b21b6);
  box-shadow: 0 0 0 3px rgba(255,255,255,.82), 0 0 18px rgba(168,85,247,.34);
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3{
  position: relative;
  z-index: 2;
  width: fit-content;
  min-width: min(260px, 100%);
  margin: 0 auto 12px;
  padding: 8px 36px;
  border-radius: 999px;
  border: 1px solid rgba(245, 190, 98, .74);
  background:
    linear-gradient(90deg, rgba(255,246,226,.96), rgba(255,255,255,.90), rgba(255,236,247,.94));
  color: #12325f;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  box-shadow: 0 10px 20px rgba(91, 68, 45, .10), inset 0 0 0 1px rgba(255,255,255,.78);
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3::before,
body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3::after{
  content: "❀";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #f472b6;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(244,114,182,.45);
}

body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3::before{ left: 18px; }
body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3::after{ right: 18px; }

body.jlpt180-clean-lobby #view-profile .pf-medals{
  position: relative;
  z-index: 2;
}

body.jlpt180-clean-lobby #view-profile .pf-medal{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 136px;
  padding: 14px 10px 12px;
  border-radius: 22px;
  border: 1px solid rgba(245, 190, 98, .48);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.98), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 18% 15%, rgba(255, 169, 210, .28), transparent 28%),
    radial-gradient(circle at 82% 15%, rgba(125, 211, 252, .26), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,249,239,.88));
  box-shadow:
    0 12px 22px rgba(7, 52, 81, .10),
    0 0 0 1px rgba(255,255,255,.76) inset,
    0 0 20px rgba(245, 190, 98, .12);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.jlpt180-clean-lobby #view-profile .pf-medal::before{
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 18px;
  opacity: .46;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(245,190,98,.32) 49%, transparent 53%),
    linear-gradient(45deg, transparent 0 45%, rgba(244,114,182,.16) 49%, transparent 53%);
  box-shadow: inset 0 0 0 1px rgba(245,190,98,.28);
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-medal::after{
  content: "✦";
  position: absolute;
  top: 31px;
  left: 50%;
  z-index: 3;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255,255,255,.80),
    0 0 14px var(--medal-color),
    0 1px 2px rgba(8, 47, 73, .32);
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-medal-ring{
  position: relative;
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 999px;
  margin: 0 auto 5px;
  background:
    radial-gradient(circle at 36% 26%, #ffffff 0 12%, rgba(255,255,255,.70) 13% 24%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.82) 0 25%, var(--medal-color) 26% 58%, rgba(9, 52, 83, .28) 100%);
  border: 2px solid rgba(255,255,255,.72);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--medal-color) 45%, #ffffff),
    0 0 0 6px rgba(255,255,255,.48),
    0 10px 20px rgba(7, 52, 81, .14),
    0 0 22px color-mix(in srgb, var(--medal-color) 32%, transparent);
}

body.jlpt180-clean-lobby #view-profile .pf-medal-ring::before{
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, transparent 0 10deg, rgba(245,190,98,.82) 11deg 18deg, transparent 19deg 45deg, rgba(255,255,255,.70) 46deg 52deg, transparent 53deg 90deg, rgba(244,114,182,.60) 91deg 98deg, transparent 99deg 135deg, rgba(255,255,255,.70) 136deg 142deg, transparent 143deg 180deg, rgba(245,190,98,.82) 181deg 188deg, transparent 189deg 225deg, rgba(255,255,255,.70) 226deg 232deg, transparent 233deg 270deg, rgba(244,114,182,.60) 271deg 278deg, transparent 279deg 315deg, rgba(255,255,255,.70) 316deg 322deg, transparent 323deg 360deg);
  opacity: .78;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--medal-color) 25%, transparent));
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-medal-ring::after{
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 0 9px rgba(255,255,255,.70);
  pointer-events: none;
}

body.jlpt180-clean-lobby #view-profile .pf-medal b{
  color: #11345f;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 0 12px color-mix(in srgb, var(--medal-color) 34%, transparent);
}

body.jlpt180-clean-lobby #view-profile .pf-medal span,
body.jlpt180-clean-lobby #view-profile .pf-medal small{
  color: #33506a;
  font-size: 10px;
  line-height: 1.12;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

body.jlpt180-clean-lobby #view-profile .pf-medal.is-active{
  border-color: color-mix(in srgb, var(--medal-color) 58%, #ffffff);
  box-shadow:
    0 14px 26px rgba(7, 52, 81, .14),
    0 0 0 1px rgba(255,255,255,.78) inset,
    0 0 26px color-mix(in srgb, var(--medal-color) 24%, transparent);
}

body.jlpt180-clean-lobby #view-profile .pf-medal.is-locked{
  opacity: .66;
  filter: grayscale(.62) saturate(.78);
}

body.jlpt180-clean-lobby #view-profile .pf-medal:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 30px rgba(7, 52, 81, .16),
    0 0 0 1px rgba(255,255,255,.80) inset,
    0 0 28px color-mix(in srgb, var(--medal-color) 30%, transparent);
}

@media (max-width: 899px) {
  body.jlpt180-clean-lobby #view-profile .pf-cert-zone{
    padding: 14px 12px 16px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-cert-zone h3{
    min-width: 0;
    width: 100%;
    padding: 9px 38px;
    font-size: 17px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-medals{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-medal{
    min-height: 126px;
    padding: 12px 8px 10px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-medal-ring{
    width: 52px;
    height: 52px;
  }
}


@media (max-width: 899px) {
  body.jlpt180-clean-lobby #view-profile .pf-pet,
  body.jlpt180-clean-lobby #view-profile .pf-weapon{
    transform: scale(1.12);
  }

  body.jlpt180-clean-lobby #view-profile .pf-asset-wrap,
  body.jlpt180-clean-lobby #view-profile .pf-weapon-orb{
    width: 86px;
    height: 86px;
  }

  body.jlpt180-clean-lobby #view-profile .pf-medals{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}