@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  color-scheme: dark;
  --honor-a: #f4b63d;
  --honor-b: #f8df72;
  --honor-c: #f6f3df;
  --honor-d: #d9e2f1;
  --honor-deep: #3b2610;
  --honor-glow: rgba(244, 182, 61, .18);
  --text: #f6f8fb;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 867px;
  height: 1230px;
  margin: 0;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

.image-board {
  position: relative;
  width: 867px;
  height: 1230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.image-board::before {
  content: "";
  position: absolute;
  width: 827px;
  height: 1192px;
  border-radius: 34px;
  background: linear-gradient(180deg, #111722 0%, #10151d 58%, #0f141d 100%);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, .02);
  z-index: 0;
}

.profile-card {
  position: relative;
  z-index: 1;
  width: 805px;
  height: 1170px;
  overflow: hidden;
  border: 10px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(12, 16, 24, .14) 0%, rgba(12, 16, 24, .62) 62%, rgba(8, 11, 17, .96) 100%) padding-box,
    #10151d padding-box,
    linear-gradient(
      135deg,
      var(--honor-a) 0%,
      var(--honor-deep) 15%,
      #070913 32%,
      var(--honor-b) 49%,
      var(--honor-c) 62%,
      var(--honor-deep) 80%,
      var(--honor-a) 100%
    ) border-box;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, .34),
    0 0 28px var(--honor-glow),
    0 0 46px color-mix(in srgb, var(--honor-deep) 58%, transparent);
}

.profile-card[data-honor-grade="1"] {
  --honor-a: #55f2ff;
  --honor-b: #e7f0ff;
  --honor-c: #8b95a8;
  --honor-d: #566378;
  --honor-deep: #102b36;
  --honor-glow: rgba(85, 242, 255, .34);
}

.profile-card[data-honor-grade="2"] {
  --honor-a: #c7ff13;
  --honor-b: #7dff2b;
  --honor-c: #eaff9d;
  --honor-d: #32d926;
  --honor-deep: #173a08;
  --honor-glow: rgba(126, 255, 43, .42);
}

.profile-card[data-honor-grade="3"] {
  --honor-a: #30f4ff;
  --honor-b: #00c8ff;
  --honor-c: #b9fbff;
  --honor-d: #1888ff;
  --honor-deep: #0a284f;
  --honor-glow: rgba(48, 244, 255, .42);
}

.profile-card[data-honor-grade="4"] {
  --honor-a: #ff48ff;
  --honor-b: #cf37ff;
  --honor-c: #ffb8ff;
  --honor-d: #9228ff;
  --honor-deep: #2b0b45;
  --honor-glow: rgba(223, 75, 255, .46);
}

.profile-card[data-honor-grade="5"] {
  --honor-a: #ff6817;
  --honor-b: #ffc72e;
  --honor-c: #fff0a6;
  --honor-d: #ff381c;
  --honor-deep: #4b1608;
  --honor-glow: rgba(255, 136, 28, .48);
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  padding: 6px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--honor-a) 0%,
    var(--honor-deep) 18%,
    var(--honor-b) 42%,
    var(--honor-c) 58%,
    var(--honor-deep) 82%,
    var(--honor-a) 100%
  );
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--honor-deep) 36%, transparent),
    0 0 14px color-mix(in srgb, var(--honor-a) 32%, transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 8;
}

.class-badge {
  position: absolute;
  top: 40px;
  left: 46px;
  z-index: 11;
  min-width: 96px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border-radius: 8px;
  background: rgba(28, 34, 48, .92);
  color: #f8fafc;
  font-size: 31px;
  font-weight: 800;
}

.symbol-mark {
  position: absolute;
  top: 48px;
  right: 54px;
  z-index: 11;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, .93);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  font-weight: 900;
  opacity: .95;
  overflow: hidden;
  background: rgba(12, 16, 24, .35);
}

.class-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .18));
}

.class-logo-fallback {
  max-width: 54px;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.05;
}

.character-image {
  position: absolute;
  top: 86px;
  left: 50%;
  z-index: 3;
  width: 760px;
  height: 900px;
  object-fit: contain;
  transform:
    translateX(-50%)
    translate(var(--character-x, 0px), var(--character-y, -80px))
    scale(var(--character-scale, 1.34));
  transform-origin: center top;
  filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .45));
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, .82) 56%,
    rgba(0, 0, 0, .22) 63%,
    transparent 70%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, .82) 56%,
    rgba(0, 0, 0, .22) 63%,
    transparent 70%
  );
}

.character-image[src=""] {
  opacity: 0;
}

.bottom-shade {
  position: absolute;
  inset: 500px 0 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(7, 10, 15, .34) 22%,
    rgba(7, 10, 15, .82) 52%,
    rgba(7, 10, 15, .98) 100%
  );
}

.character-copy {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 268px;
  z-index: 12;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .72);
}

.title-line {
  margin: 0 0 12px;
  color: #d8dce7;
  font-size: 36px;
  font-weight: 500;
  transform: translateY(16px);
}

.character-copy h1 {
  margin: 0 0 12px;
  font-size: 58px;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(16px);
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #e8ebf2;
  font-size: 33px;
}

.honor-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.honor-icon {
  width: 76px;
  height: 76px;
  display: block;
  background-image: url("./assets/honor-symbol.png");
  background-repeat: no-repeat;
  background-size: 500% auto;
  filter: drop-shadow(0 0 10px rgba(137, 231, 255, .55));
}

#honorValue {
  display: inline-block;
  font-size: 42px;
  line-height: 1;
}

.honor-icon[data-honor-grade="1"] {
  background-position: 0 0;
}

.honor-icon[data-honor-grade="2"] {
  background-position: 25% 0;
}

.honor-icon[data-honor-grade="3"] {
  background-position: 50% 0;
}

.honor-icon[data-honor-grade="4"] {
  background-position: 75% 0;
}

.honor-icon[data-honor-grade="5"] {
  background-position: 100% 0;
}

.stat-box {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 48px;
  z-index: 12;
  margin: 0;
  height: 214px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 9px 18px;
  padding: 12px 17px;
  border: 3px solid #48566e;
  border-radius: 8px;
  background: rgba(9, 13, 22, .56);
}

.stat-box div {
  min-width: 0;
  display: grid;
  grid-template-columns: 156px 1fr;
  align-items: center;
  gap: 8px;
}

.stat-box .stat-guild {
  grid-column: 1 / -1;
  grid-template-columns: 156px 1fr;
}

.stat-box dt {
  min-height: 46px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 7px;
  background: #252d3d;
  color: #f6f7fb;
  font-size: 32px;
  font-weight: 900;
  white-space: nowrap;
}

.stat-box dd {
  margin: 0;
  min-width: 0;
  color: #f4f6fa;
  font-size: 39px;
  line-height: 1.08;
  white-space: nowrap;
}