@font-face {
  font-family: TooltipYoon;
  src: url("/assets/fonts/Aion2Yoon_EN_B.ttf?v=ae63a49ad0c4") format("truetype");
  font-weight: 700;
  font-display: swap;
}
.tooltip-demo-page,
.tooltip-demo-page *,
.item-tooltip,
.item-tooltip * {
  box-sizing: border-box;
}
.tooltip-demo-page {
  min-height: 100%;
  margin: 0;
}
.tooltip-demo-page {
  min-height: 100vh;
  background: radial-gradient(
    ellipse at 50% 36%,
    #1c2633 0,
    #0b1018 52%,
    #05070b 100%
  );
  color: #f0f1f4;
  font-family: TooltipYoon, Arial, sans-serif;
}
.tooltip-demo-header {
  height: 78px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: #06090e;
  border-bottom: 1px solid #333a45;
  box-shadow: 0 4px 22px #0008;
}
.tooltip-demo-header > div {
  text-align: center;
}
.tooltip-demo-header > div span {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #8194a8;
}
.tooltip-demo-header h1 {
  margin: 2px 0 0;
  font:
    700 20px Georgia,
    serif;
  color: #e7e9ef;
}
.tooltip-demo-back {
  color: #b8c8d9;
  text-decoration: none;
  font-size: 13px;
}
.tooltip-demo-header label {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aebac8;
  font-size: 12px;
}
#gradePicker {
  min-width: 128px;
  padding: 8px 26px 8px 10px;
  border: 1px solid #455466;
  border-radius: 2px;
  background: #171f2a;
  color: #f2f4f7;
  font:
    700 12px TooltipYoon,
    Arial,
    sans-serif;
}
.tooltip-demo-stage {
  min-height: calc(100vh - 78px);
  padding: 54px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.item-tooltip {
  position: relative;
  width: 355px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(170, 185, 203, 0.48);
  background: #10151d;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(0, 0, 0, 0.75);
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Common.png?v=41b7e6ef3407");
  --grade-color: #c6c6c6;
}
.item-tooltip--closed {
  display: none !important;
}
.item-tooltip[data-grade="Common"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Common.png?v=41b7e6ef3407");
  --grade-color: #d0d0d0;
}
.item-tooltip[data-grade="Special"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Special.png?v=400f1cbd5c04");
  --grade-color: #74de91;
}
.item-tooltip[data-grade="Rare"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Rare.png?v=af95d9a208e5");
  --grade-color: #61c8ff;
}
.item-tooltip[data-grade="Epic"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Epic.png?v=670384e16c3a");
  --grade-color: #f1a04c;
}
.item-tooltip[data-grade="Unique"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Unique.png?v=90e2d6bc110c");
  --grade-color: #c274e9;
}
.item-tooltip[data-grade="Legend"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Legend.png?v=553efaf9e3bd");
  --grade-color: #f1d45b;
}
.item-tooltip[data-grade="Mythic"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Mythic.png?v=9c43a7c75deb");
  --grade-color: #ef6d67;
}
.item-tooltip[data-grade="Reserve"] {
  --grade-bg: url("https://cdn.aion2armory.com/assets/tooltip/grades/UT_ItemTooltipGrade_Reserve.png?v=7eb47181f980");
  --grade-color: #99a7b7;
}
.item-tooltip__head {
  position: relative;
  height: 140px;
  padding: 8px 14px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 72%), var(--grade-bg);
  background-position: center;
  background-size: 100% 100%;
  border-bottom: 1px solid rgba(211, 220, 231, 0.28);
}
.item-tooltip::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0px;
  bottom: 50px;
  width: 34px;
  background: linear-gradient(
    90deg,
    rgba(13, 20, 30, 0.86),
    rgba(24, 32, 44, 0.96)
  );
  border-left: 1px solid rgba(4, 8, 13, 0.75);
  pointer-events: none;
}
.item-tooltip__name {
  overflow: visible;
  color: #f5f3ed;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  font:
    700 17px/1.2 Georgia,
    serif;
  text-shadow: 0 1px 3px #000;
}
.item-tooltip__category {
  max-width: 205px;
  margin-top: 2px;
  overflow: hidden;
  color: #e0e0e0;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    700 14px/1.2 TooltipYoon,
    Arial,
    sans-serif;
  text-shadow: 0 1px 2px #000;
}
.item-tooltip__close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0px;
  width: 36px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #d9e1e9;
  font:
    300 34px/1 Arial,
    sans-serif;
  cursor: pointer;
}
.item-tooltip__close:hover {
  color: white;
  background: #222e3e;
}
.item-tooltip__icon {
  position: absolute;
  right: 22px;
  top: 32px;
  width: 79px;
  /* height: 76px; */
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 5px #000b);
}
.item-tooltip__body {
  height: auto;
  flex: 1 1 auto;
  padding: 10px 13px;
  background:
    radial-gradient(
      ellipse at 50% 70%,
      rgba(38, 48, 60, 0.17),
      transparent 68%
    ),
    linear-gradient(110deg, #171d27, #121821 65%, #171e29);
  color: #e3e5e9;
}
.item-tooltip__body p {
  margin: 0;
  font:
    500 13px/1.4 Aion2Yoon,
    NotoSansUI,
    Arial,
    sans-serif;
  letter-spacing: 0.02em;
  white-space: pre-line;
}
.tooltip-demo-hint {
  margin: 0;
  color: #8c9aaa;
  font:
    12px Arial,
    sans-serif;
}
.tooltip-demo-reopen {
  padding: 8px 14px;
  border: 1px solid #455466;
  background: #171f2a;
  color: #dce5ef;
  font:
    12px TooltipYoon,
    Arial,
    sans-serif;
  cursor: pointer;
}
.tooltip-demo-reopen:hover {
  background: #253244;
}
@media (max-width: 480px) {
  .tooltip-demo-header {
    height: auto;
    min-height: 78px;
    padding: 10px 12px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tooltip-demo-header > div {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .tooltip-demo-back {
    grid-row: 2;
  }
  .tooltip-demo-header label {
    grid-row: 2;
  }
  .tooltip-demo-stage {
    min-height: calc(100vh - 98px);
    padding: 20px 10px;
  }
  .item-tooltip {
    max-width: 100%;
    transform: scale(0.94);
    transform-origin: center;
  }
}
.item-tooltip--floating {
  position: fixed;
  z-index: 10000;
  width: 315px;
  height: auto;
  /* min-height: 395px; */
  max-width: calc(100vw - 16px);
  /* max-height: calc(100vh - 16px); */
  margin: 0;
  transform: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.item-tooltip--floating::after {
  display: none;
}
.item-tooltip--floating .item-tooltip__close {
  display: none;
}
.item-tooltip--floating .item-tooltip__head {
  flex: 0 0 100px;
}
.item-tooltip--floating .item-tooltip__category {
  max-width: calc(100% - 105px);
}
.item-tooltip--floating .item-tooltip__body {
  flex: 1 1 auto;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #53677a #121821;
  background: linear-gradient(110deg, #171d27, #121821 65%, #171e29);
}
.item-tooltip--floating .item-tooltip__body p {
  line-height: 1.45;
}
.item-tooltip--floating .item-tooltip__body p:first-child {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.item-tooltip--floating .item-tooltip__body .item-tooltip__meta {
  margin-top: 8px;
  color: #93a4b5;
  font:
    11px/1.35 ui-monospace,
    Consolas,
    monospace;
}
.item-tooltip__icon-sprite {
  display: block;
  width: 54px;
  height: 54px;
  background-image: url("https://cdn.aion2armory.com/assets/reward-icon-atlas.webp?v=74bc2d15799d");
  background-repeat: no-repeat;
  background-position: var(--reward-icon-position, 0 0);
  filter: drop-shadow(0 3px 5px #000b);
}