@import url("https://lilithdev.neocities.org/shrine/vg/nso/common.css");

.achievement-container {
  flex-grow:1;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-color: var(--lilith-scrollbar-inner-color) var(--lilith-scrollbar-outer-color);
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 32px !important;
}

.achievement-list-title {
  font-size: 36px;
  color: var(--lilith-window-text-color);
  font-family: var(--lilith-alt-text);
  font-weight: bold;
}

.achievement-list-subtitle {
  width: 100%;
  font-size: 24px;
  color: var(--lilith-window-text-color);
  font-family: var(--lilith-alt-text);
  font-weight: bold;
  margin-top: 24px;
}

.hall-of-fame-grid {
  display: flex;
  gap: 16px;
  flex-direction: column;
  /*width: 90%;*/
}

.hall-of-fame-item {
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
}

.hall-of-fame-item img {
  display: block;
}

.hall-of-fame-pfp {
  mask-image: url(https://lilithdev.neocities.org/shrine/vg/nso/sprites/icon_mask.png);
  mask-mode: luminance;
  mask-size: cover;
  width: 25px;
  height: 25px;
  image-rendering: pixelated;
}

.achievement-list-subtitle:has(.complete) {
  /*text-stroke: 4px var(--lilith-window-text-color);
  -webkit-text-stroke: 4px var(--lilith-window-text-color);
  paint-order: stroke fill;*/
  
  /*background: linear-gradient(to bottom, #e8d460, #9e6305);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  text-shadow: 4px, 4px, 4px, rgba(0,0,0,0.5);*/
  /*-webkit-text-stroke: 4px white;
  paint-order: stroke fill;
  color: transparent;
  background: linear-gradient(to bottom, #e8d460, #9e6305);
  -webkit-background-clip: text;*/
}

.achievement-list-subtitle > a {
  color: inherit;
  text-decoration: none;
}

.achievement-progress-bar-outer {
  border: 2px solid var(--lilith-window-text-color);
  min-height: 16px;
  width: 100%;
  /*margin-bottom: 16px;*/
  background: var(--lilith-window-text-color);
}

.achievement-progress-bar-inner {
  background: linear-gradient(90deg, rgba(237,208,238,1) 0%, rgba(237,208,238,1) 35%, rgba(148,241,225,1) 100%);
  width: /*calc(67 / 100 * 100%)*/0;
  height: 100%;  
}

.achievement-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

ul.achievement-list-subtitle {
  margin: 0;
}

.achievement-list-subtitle > li::marker {
  content: "* ";
}

@media (max-width: 550px) {
  #achievement-window {
    max-width: initial !important;
    min-width: initial !important;
    width: calc(100% - 6px) !important;
    height: calc(100% - 6px) !important;
  }
  
  .achievement-container {
    padding: 16px !important;
    overflow-x: auto;
  }
  
  .achievement-list-container {
    align-self: stretch;
    align-items: flex-start;
  }
}

/*max-width: 520px;
  width: 100%;
  height: 100%;*/