/*
 * XCHAT_PUBLIC_PROFILE_V2
 *
 * Standalone public profile card.
 * Namespace: xup-*
 */

:root {
  color-scheme: dark;

  font-family:
    Verdana,
    Arial,
    sans-serif;

  background:
    #020617;
}


* {
  box-sizing:
    border-box;
}


html,
body {
  min-height:
    100%;

  margin:
    0;
}


body {
  min-height:
    100vh;

  overflow-x:
    hidden;

  color:
    #e7f2ff;

  background:
    radial-gradient(
      circle at 50% -12%,
      rgba(34, 111, 255, .34),
      transparent 32rem
    ),
    radial-gradient(
      circle at 6% 88%,
      rgba(0, 190, 255, .10),
      transparent 25rem
    ),
    linear-gradient(
      180deg,
      #07132f 0%,
      #03091d 58%,
      #020617 100%
    );
}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


.xup-ambient {
  position:
    fixed;

  z-index:
    0;

  width:
    320px;

  height:
    320px;

  border-radius:
    50%;

  pointer-events:
    none;

  filter:
    blur(80px);

  opacity:
    .20;
}


.xup-ambient-one {
  top:
    -130px;

  left:
    -110px;

  background:
    #227bff;
}


.xup-ambient-two {
  right:
    -150px;

  bottom:
    -150px;

  background:
    #00a4ff;
}


.xup-shell {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      760px,
      calc(100% - 28px)
    );

  margin:
    0 auto;

  padding:
    max(
      26px,
      env(safe-area-inset-top)
    )
    0
    max(
      30px,
      env(safe-area-inset-bottom)
    );
}


.xup-topbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    0 2px 14px;
}


.xup-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  color:
    #ecf7ff;

  font-size:
    23px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.5px;

  text-decoration:
    none;
}


.xup-brand-mark {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px solid
    rgba(104, 196, 255, .72);

  border-radius:
    9px;

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #35b7ff,
      #1764da 72%
    );

  box-shadow:
    0 0 18px
    rgba(37, 142, 255, .34);

  font-size:
    19px;

  text-shadow:
    0 1px 3px
    rgba(0, 0, 0, .35);
}


.xup-brand-text {
  text-shadow:
    0 0 18px
    rgba(97, 189, 255, .28);
}


.xup-public-label {
  color:
    #6e8fb4;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.xup-card {
  min-height:
    280px;

  padding:
    24px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--xup-aura-2, #61adde) 40%,
      transparent
    );

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 5% 4%,
      color-mix(
        in srgb,
        var(--xup-aura-1, #61adde) 8%,
        transparent
      ),
      transparent 31rem
    ),

    radial-gradient(
      circle at 95% 4%,
      color-mix(
        in srgb,
        var(--xup-aura-3, #61adde) 8%,
        transparent
      ),
      transparent 31rem
    ),

    linear-gradient(
      180deg,
      rgba(11, 30, 70, .96),
      rgba(4, 13, 39, .98)
    );

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, .45),

    -12px 0 34px
    color-mix(
      in srgb,
      var(--xup-aura-1, #61adde) 20%,
      transparent
    ),

    0 0 38px
    color-mix(
      in srgb,
      var(--xup-aura-2, #61adde) 18%,
      transparent
    ),

    12px 0 34px
    color-mix(
      in srgb,
      var(--xup-aura-3, #61adde) 20%,
      transparent
    ),

    inset 0 1px 0
    rgba(255, 255, 255, .05);
}


.xup-hero {
  display:
    grid;

  grid-template-columns:
    136px
    minmax(0, 1fr);

  gap:
    22px;

  align-items:
    center;
}


.xup-avatar-shell {
  position:
    relative;

  width:
    136px;

  height:
    136px;

  overflow:
    hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--xup-aura-2, #61adde) 64%,
      transparent
    );

  border-radius:
    20px;

  background:
    radial-gradient(
      circle at 22% 24%,
      color-mix(
        in srgb,
        var(--xup-aura-1, #61adde) 8%,
        transparent
      ),
      transparent 60%
    ),

    linear-gradient(
      145deg,
      rgba(18, 64, 129, .62),
      rgba(3, 12, 35, .94)
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .28),

    -5px 0 18px
    color-mix(
      in srgb,
      var(--xup-aura-1, #61adde) 24%,
      transparent
    ),

    0 0 25px
    color-mix(
      in srgb,
      var(--xup-aura-2, #61adde) 29%,
      transparent
    ),

    5px 0 18px
    color-mix(
      in srgb,
      var(--xup-aura-3, #61adde) 24%,
      transparent
    );
}


.xup-avatar {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.xup-avatar[hidden] {
  display:
    none;
}


.xup-avatar-fallback {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #72bfff;

  font-size:
    48px;

  font-weight:
    900;

  opacity:
    .55;
}


.xup-main {
  min-width:
    0;
}


.xup-kicker,
.xup-section-kicker {
  margin-bottom:
    6px;

  color:
    #6488b4;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.xup-nick {
  min-height:
    39px;

  color:
    #fff;

  font-size:
    30px;

  font-weight:
    800;

  line-height:
    1.2;

  overflow-wrap:
    anywhere;
}


.xup-nick
.xc-vip-nick-image {
  max-width:
    100%;

  max-height:
    40px;

  vertical-align:
    middle;
}


.xup-badges {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    10px;
}


.xup-member-status,
.xup-vip {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    27px;

  padding:
    4px 10px;

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    800;
}


.xup-member-status {
  border:
    1px solid
    rgba(255, 211, 97, .34);

  color:
    #ffe39a;

  background:
    rgba(122, 83, 6, .18);
}


.xup-vip {
  border:
    1px solid
    rgba(100, 191, 255, .44);

  color:
    #a9ddff;

  background:
    rgba(22, 113, 190, .18);
}


.xup-vip[hidden] {
  display:
    none;
}


.xup-user-status {
  max-width:
    100%;

  margin-top:
    11px;

  padding:
    9px 11px;

  border-left:
    2px solid
    rgba(86, 172, 255, .56);

  border-radius:
    0 8px 8px 0;

  color:
    #bfd9f5;

  background:
    rgba(3, 13, 36, .52);

  font-size:
    13px;

  line-height:
    1.42;

  overflow-wrap:
    anywhere;
}


.xup-user-status[hidden] {
  display:
    none;
}


.xup-streak {
  --xup-streak-color:
    #ffd52b;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    11px;

  padding:
    6px 10px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--xup-streak-color)
      42%,
      transparent
    );

  border-radius:
    999px;

  color:
    color-mix(
      in srgb,
      var(--xup-streak-color)
      84%,
      white
    );

  background:
    color-mix(
      in srgb,
      var(--xup-streak-color)
      11%,
      transparent
    );

  font-size:
    12px;

  font-weight:
    800;
}


.xup-streak[hidden] {
  display:
    none;
}


.xup-streak-star {
  color:
    var(--xup-streak-color);

  text-shadow:
    0 0 5px
    var(--xup-streak-color);
}


.xup-meta {
  grid-column:
    1 / -1;

  display:
    grid;

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

  gap:
    10px;

  margin:
    22px 0 0;

  padding:
    0;
}


.xup-meta-item {
  min-width:
    0;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(76, 145, 222, .20);

  border-radius:
    12px;

  background:
    rgba(4, 16, 45, .58);
}


.xup-meta dt {
  margin:
    0 0 5px;

  color:
    #6d8fb4;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}


.xup-meta dd {
  min-width:
    0;

  margin:
    0;

  color:
    #e3f1ff;

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.xup-achievements {
  grid-column:
    1 / -1;

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(75, 145, 226, .19);
}


.xup-achievements[hidden] {
  display:
    none;
}


.xup-section-head {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    11px;
}


.xup-section-head h2 {
  margin:
    0;

  color:
    #eaf5ff;

  font-size:
    17px;
}


.xup-achievement-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    28px;

  height:
    28px;

  padding:
    0 8px;

  border:
    1px solid
    rgba(92, 167, 255, .24);

  border-radius:
    999px;

  color:
    #95c7f5;

  background:
    rgba(18, 59, 113, .25);

  font-size:
    11px;

  font-weight:
    800;
}


.xup-achievement-list {
  display:
    grid;

  gap:
    9px;
}


.xup-achievement {
  position:
    relative;

  padding:
    13px 14px 12px 46px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(91, 168, 255, .23);

  border-radius:
    13px;

  background:
    linear-gradient(
      120deg,
      rgba(25, 72, 133, .25),
      rgba(5, 18, 49, .54)
    );
}


.xup-achievement::before {
  content:
    "✦";

  position:
    absolute;

  top:
    13px;

  left:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    23px;

  height:
    23px;

  border-radius:
    7px;

  color:
    #7dc9ff;

  background:
    rgba(33, 126, 210, .18);

  box-shadow:
    0 0 14px
    rgba(57, 143, 255, .13);

  font-size:
    13px;
}


.xup-achievement-title {
  color:
    #dceeff;

  font-size:
    13px;

  font-weight:
    800;
}


.xup-achievement-description {
  margin-top:
    4px;

  color:
    #88a9c9;

  font-size:
    11px;

  line-height:
    1.45;
}


.xup-achievement-meta {
  margin-top:
    7px;

  color:
    #6489b1;

  font-size:
    10px;

  font-weight:
    700;
}


.xup-actions {
  grid-column:
    1 / -1;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  margin-top:
    22px;
}


.xup-primary,
.xup-secondary,
.xup-error-link {
  min-height:
    44px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    9px 13px;

  border-radius:
    11px;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    800;

  cursor:
    pointer;

  text-align:
    center;

  text-decoration:
    none;
}


.xup-primary {
  border:
    1px solid
    #62c5ff;

  color:
    #fff;

  background:
    linear-gradient(
      180deg,
      #19a8ed,
      #075bbd
    );

  box-shadow:
    0 0 20px
    rgba(31, 143, 255, .22);
}


.xup-primary:hover {
  filter:
    brightness(1.07);
}


.xup-secondary {
  border:
    1px solid
    rgba(121, 177, 238, .34);

  color:
    #cfe8ff;

  background:
    rgba(11, 33, 73, .78);
}


.xup-secondary:hover {
  background:
    rgba(18, 49, 102, .84);
}


.xup-loading,
.xup-error {
  padding:
    92px 18px;

  text-align:
    center;

  color:
    #88a8c9;
}


.xup-loading-dot {
  display:
    inline-block;

  width:
    8px;

  height:
    8px;

  margin-right:
    7px;

  border-radius:
    50%;

  background:
    #61baff;

  box-shadow:
    0 0 12px
    rgba(75, 177, 255, .72);

  animation:
    xupPulse
    1.2s
    ease-in-out
    infinite;
}


@keyframes xupPulse {
  0%,
  100% {
    opacity:
      .35;
  }

  50% {
    opacity:
      1;
  }
}


.xup-error-title {
  color:
    #ffd4de;

  font-size:
    17px;

  font-weight:
    800;
}


.xup-error-text {
  max-width:
    420px;

  margin:
    8px auto 18px;

  color:
    #7898b8;

  font-size:
    12px;

  line-height:
    1.5;
}


.xup-error-link {
  min-width:
    180px;

  border:
    1px solid
    rgba(112, 177, 244, .35);

  color:
    #d6ebff;

  background:
    rgba(13, 43, 89, .70);
}


.xup-foot {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    14px;

  color:
    #4e7098;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .03em;
}


.xup-foot-dot {
  color:
    #285a8f;
}


@media (max-width: 620px) {
  .xup-shell {
    width:
      min(
        100% - 14px,
        760px
      );

    padding-top:
      max(
        12px,
        env(safe-area-inset-top)
      );
  }


  .xup-topbar {
    margin:
      0 4px 10px;
  }


  .xup-brand {
    font-size:
      20px;
  }


  .xup-brand-mark {
    width:
      27px;

    height:
      27px;

    border-radius:
      8px;

    font-size:
      17px;
  }


  .xup-public-label {
    font-size:
      9px;
  }


  .xup-card {
    padding:
      16px;

    border-radius:
      17px;
  }


  .xup-hero {
    grid-template-columns:
      92px
      minmax(0, 1fr);

    gap:
      14px;
  }


  .xup-avatar-shell {
    width:
      92px;

    height:
      92px;

    border-radius:
      15px;
  }


  .xup-avatar-fallback {
    font-size:
      35px;
  }


  .xup-kicker {
    margin-bottom:
      4px;

    font-size:
      8px;
  }


  .xup-nick {
    min-height:
      30px;

    font-size:
      23px;
  }


  .xup-member-status,
  .xup-vip,
  .xup-streak {
    font-size:
      10px;
  }


  .xup-user-status {
    margin-top:
      8px;

    padding:
      7px 9px;

    font-size:
      11px;
  }


  .xup-meta {
    grid-template-columns:
      1fr 1fr;

    gap:
      8px;

    margin-top:
      17px;
  }


  .xup-meta-item {
    padding:
      10px;
  }


  .xup-meta dt {
    font-size:
      9px;
  }


  .xup-meta dd {
    font-size:
      12px;
  }


  .xup-achievements {
    margin-top:
      18px;

    padding-top:
      16px;
  }


  .xup-achievement {
    padding:
      12px 12px 11px 43px;
  }


  .xup-actions {
    grid-template-columns:
      1fr;

    gap:
      8px;

    margin-top:
      18px;
  }


  .xup-primary,
  .xup-secondary {
    min-height:
      43px;
  }
}


@media (max-width: 380px) {
  .xup-public-label {
    display:
      none;
  }


  .xup-card {
    padding:
      14px;
  }


  .xup-hero {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    gap:
      12px;
  }


  .xup-avatar-shell {
    width:
      78px;

    height:
      78px;
  }


  .xup-nick {
    font-size:
      21px;
  }


  .xup-meta {
    grid-template-columns:
      1fr;
  }
}


/*
 * XCHAT_PUBLIC_PROFILE_PARITY_V5
 *
 * Graphical nick and VIP badge use existing canonical CSS owners.
 * Only standalone achievement adaptation lives here.
 */

.xup-achievement[data-achievement-key="revival-i"]::before {
  content:
    "";

  background:
    url('/assets/achievements/revival-i.png?v=1')
    center / contain
    no-repeat;

  box-shadow:
    none;
}


/*
 * XCHAT_PUBLIC_PROFILE_GIFTS_V1
 */

.xup-gifts {
  grid-column:
    1 / -1;

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(75, 145, 226, .19);
}


.xup-gifts[hidden] {
  display:
    none;
}


.xup-gift-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    28px;

  height:
    28px;

  padding:
    0 8px;

  border:
    1px solid
    rgba(255, 199, 82, .26);

  border-radius:
    999px;

  color:
    #ffd98b;

  background:
    rgba(128, 80, 7, .18);

  font-size:
    11px;

  font-weight:
    800;
}


.xup-gift-list {
  display:
    grid;

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

  gap:
    10px;
}


.xup-gift {
  position:
    relative;

  min-width:
    0;

  padding:
    11px;

  overflow:
    visible;

  border:
    1px solid
    rgba(255, 255, 255, .085);

  border-radius:
    14px;

  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(255, 255, 255, .10),
      rgba(255, 255, 255, .02) 48%,
      transparent 72%
    ),

    linear-gradient(
      180deg,
      rgba(38, 49, 105, .90),
      rgba(16, 23, 61, .97)
    );

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .04),
    0 8px 24px
    rgba(0, 0, 0, .27);
}


.xup-gift.is-favorite {
  border-color:
    rgba(242, 194, 70, .74);

  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(244, 199, 82, .15),
      rgba(255, 255, 255, .02) 50%,
      transparent 73%
    ),

    linear-gradient(
      180deg,
      rgba(44, 47, 96, .94),
      rgba(18, 22, 58, .98)
    );

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .04),
    0 8px 24px
    rgba(0, 0, 0, .27),
    0 0 20px
    rgba(235, 186, 59, .10);
}


.xup-gift-image-shell {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  aspect-ratio:
    1 / 1;

  margin-bottom:
    9px;

  overflow:
    hidden;

  border-radius:
    10px;

  background:
    rgba(2, 10, 30, .62);
}


.xup-gift-image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.xup-gift-name {
  color:
    #b9ef5e;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.xup-gift-from,
.xup-gift-date {
  margin-top:
    4px;

  color:
    #7192b4;

  font-size:
    9px;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.xup-gift-favorite {
  position:
    absolute;

  top:
    7px;

  right:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    24px;

  height:
    24px;

  border:
    1px solid
    rgba(255, 215, 104, .42);

  border-radius:
    999px;

  color:
    #ffe18b;

  background:
    rgba(36, 23, 4, .80);

  box-shadow:
    0 0 15px
    rgba(255, 193, 53, .16);

  font-size:
    12px;
}


@media (max-width: 620px) {
  .xup-gifts {
    margin-top:
      18px;

    padding-top:
      16px;
  }


  .xup-gift-list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      8px;
  }


  .xup-gift {
    padding:
      9px;
  }
}


@media (max-width: 430px) {
  .xup-gift-list {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* XCHAT_PUBLIC_GIFT_ART_NATIVE_V2_3 */
.xup-gift {
  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .04),
    0 8px 24px
    rgba(0, 0, 0, .27);
}

.xup-gift.is-favorite {
  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .04),
    0 8px 24px
    rgba(0, 0, 0, .27),
    0 0 20px
    rgba(235, 186, 59, .18);
}

.xup-gift-image-shell {
  aspect-ratio:
    auto;

  min-height:
    120px;

  overflow:
    visible;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .11),
      rgba(255, 255, 255, .025) 57%,
      transparent 74%
    );
}

.xup-gift-image {
  width:
    auto;

  height:
    auto;

  max-width:
    120px;

  max-height:
    120px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 8px 12px
      rgba(0, 0, 0, .34)
    );

  opacity:
    1;
}