.section-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.section-message {
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-3, 0.125rem);
  border: 1px solid var(--clr-forSurface-03);
  background: var(--clr-surface-03);
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);

  color: var(--clr-onSurface-03--bold);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem; /* 171.429% */
}


.info-page {
  --content: 960px;
}

.info-intro {
  position: relative;
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-10);
  place-items: center;
  gap: var(--spacing-6);
  background-image: url('/assets/images/info/info-intro_bg.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(1, 24, 17, 0.00) 17.07%, rgba(1, 24, 17, 0.80) 100%);
  }

  & > * {
    isolation: isolate;
  }
}


@media (width >= 40rem) {
  .info-intro {
    padding-top: var(--spacing-15);
    padding-bottom: var(--spacing-11);
  }
}

.info-intro__title {
  align-self: end;

  color: var(--clr-bronze-100);
  text-align: center;
  font-family: var(--heading-font);
  font-size: var(--heading-xs-size);
  font-weight: var(--heading-xs-weight);
  line-height: var(--heading-xs-leading);
  letter-spacing: 0.05625rem;
  text-transform: uppercase;

  span {
    display: block;
    color: #FFD77B;
    font-family: var(--heading-font);
    font-size: var(--heading-lg-size);
    font-weight: var(--heading-lg-weight);
    line-height: var(--heading-lg-leading-tight);
    letter-spacing: -0.225rem;
  }
}

.info-intro__title::after {
  content: '';
  display: block;
  width: 128px;
  height: 2px;
  background: var(--clr-bronze-100);
  margin-top: var(--spacing-6);
  margin-inline: auto;
}

.info-intro__description {
  align-self: start;

  max-width: 80ch;
  text-wrap: balance;
  display: grid;
  gap: var(--spacing-6);
}

.info-intro__description p {
  color: var(--clr-white--80);
  text-align: center;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem; /* 155.556% */
}


/* Utilities */

.section {
  position: relative;
  padding-block: var(--spacing-10);
  place-items: center;
  gap: var(--spacing-6);
}

.section > :not(.section-bg) {
  z-index: 2;
}

.section-bg {
  --section-bg: ;
  grid-column: max;
  position: absolute;
  inset: 0;
  top: -10px;
  background-image: var(--section-bg);;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: url('/assets/images/distressed-texture-top.png');
  mask-position: top left;
}

@media (width >= 60rem) {
  .section {
    padding-block: var(--spacing-12);
    gap: var(--spacing-10);
  }
}

.section-header {
  display: grid;
  row-gap: var(--spacing-2);
}

.section-title {
  color: var(--clr-bronze-100);
  text-align: center;
  font-family: var(--heading-font);
  font-size: var(--heading-sm-size, 1.75rem);
  font-weight: var(--heading-sm-weight, 900);
  line-height: var(--heading-sm-leading, 2rem); /* 114.286% */
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
}

.section-description {
  color: var(--clr-bronze-200);
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
}

.section-heading-2 {
  color: var(--clr-brand-600);
  text-align: center;
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: var(--heading-xs-weight, 900);
  line-height: var(--heading-xs-leading, 2rem); /* 114.286% */
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  margin-bottom: 1em;
}

@media (width >= 40rem) {
  .section-title {
    font-size: var(--heading-md-size);
    font-weight: var(--heading-md-weight);
    line-height: var(--heading-md-leading);
  }

  .section-heading-2 {
    font-size: var(--heading-sm-size);
    font-weight: var(--heading-sm-weight);
    line-height: var(--heading-sm-leading);
  }

  .section-description {
    font-size: 1.125rem;
  }
}


/* Server Info */

.server .section-bg {
  --section-bg: url('/assets/images/info/info-server_bg.png');

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(12, 12, 13, 0) 60%, rgb(12, 12, 13) 100%);
  }
}

.server-specs {
  display: flex;
  max-width: 50rem;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.5rem;
  align-self: stretch;
  flex-wrap: wrap;
}

.server-specs__item {
  display: flex;
  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-2, 0.125rem);
  border: 1px solid var(--clr-forSurface-03);
  background: var(--clr-surface-03);
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);

  color: var(--clr-onSurface-03--subtle);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5rem; /* 171.429% */

  span {
    color: var(--clr-onSurface-02);
    font-weight: 500;
  }
}


/* Item UP */

.item-up .section-bg {
  --section-bg: url('/assets/images/info/texture_bg.png');
  background-repeat: repeat;
  background-size: auto;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(35, 12, 4, 0.4) 0%, rgba(12, 12, 13, 0) 50%);
  }
}

.item-up table {
  td:not(:nth-child(1)),
  th:not(:nth-child(1)) {
    text-align: center;
  }

}

.item-up .section-content {
  display: flex;
  width: 100%;
  gap: var(--spacing-8);
}

@media (width <= 60rem) {
  .item-up .section-content {
    flex-direction: column;
  }
}

.item-up-message {
  display: flex;
  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
  border-radius: var(--radius-3, 0.125rem);
  border: 1px solid var(--clr-forSurface-01);
  background: var(--clr-surface-01);
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);

  color: var(--clr-onSurface-01);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem; /* 171.429% */
}

/* VIP */

.vip .section-bg {
  --section-bg: url('/assets/images/info/info-vip_bg.png');
}

.table-wrapper {
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
}

.vip-table {

  td, th {
    padding: var(--spacing-4);
    border: 1px solid var(--clr-base-900--60);
    position: relative;
    backdrop-filter: blur(4px);
  }

  td {
    background: var(--clr-base-800--40);
    color: var(--clr-base-300);
  }

  td:nth-child(2) {
    background: var(--clr-base-600--40);
    color: var(--clr-base-200);
    text-align: center;

  }

  td:nth-child(3) {
    background: var(--clr-bronze-600--60);
    color: var(--clr-bronze-200);
    text-align: center;

  }

  /* Table Headings */

  th {
    background: var(--clr-base-900--40);
    color: var(--clr-base-100);
  }


  th:nth-child(2) {
    background: var(--clr-base-400--40);
    color: var(--clr-base-100);
    font-weight: 700;
    text-align: center;
  }

  th:nth-child(3) {
    background: var(--clr-bronze-400);
    color: var(--clr-bronze-900);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
  }

}

@media (width >= 40rem) {
  .vip-table {

    td, th {
      padding: var(--spacing-6);
    }

  }
}


@media (width >= 40rem ) {
  .vip-table {
    table-layout: fixed;
  }
}

.beginner .section-bg {
  --section-bg: url('/assets/images/info/beginner_bg.jpg');
  background-repeat: repeat-y;
  background-size: auto;
}

.beginner-img {
  width: 100%;
  max-width: 640px;
}


.commands .section-bg {
  --section-bg: url('/assets/images/info/texture_bg.png');
  background-repeat: repeat;
  background-size: auto;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(52, 147, 101, 0.1) 0%, rgba(12, 12, 13, 0) 10%);
  }
}

.commands-section {
  display: grid;
  width: 100%;
  gap: var(--spacing-4, 1rem);
}

.commands-section__title {
  color: var(--clr-onSurface-brand);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem; /* 155.556% */
  margin-inline-start: var(--spacing-4);
}

.commands-list {
  display: grid;
  gap: var(--spacing-3, 0.75rem);
}

.command-item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  border-radius: var(--radius-2, 0.125rem);
  border: 1px solid var(--clr-forSurface-02);
  background: var(--clr-surface-02);
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
}


.command-item__description,
.command-item__hotkey {
  display: flex;
  padding: var(--spacing-2, 0.5rem);
  align-items: center;
  gap: var(--spacing-2, 0.5rem);
  flex: 1;

  color: var(--clr-onSurface-02);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  padding-inline-start: var(--spacing-4);
}

.command-item__hotkey {

  .command-key {
    display: flex;
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-2, 0.125rem);
    border: 1px solid var(--clr-forSurface-04);
    background: var(--clr-surface-04);
    color: var(--clr-onSurface-02);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5rem; /* 171.429% */
    user-select: none;
    min-width: 2rem;
  }

  .command-slash {
    display: flex;
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1, 0.25rem);
    border-radius: 0.125rem;
    border: 1px solid var(--clr-base-600);
    background: var(--clr-base-900);

    color: var(--clr-onSurface-brand);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5rem; /* 171.429% */
  }

  .command-slash--subtle {
    color: var(--clr-onSurface-01--subtle);
    font-style: italic;
    font-weight: 500;
    user-select: none;
  }
}

@media (width >= 30rem) {
  .command-item {
    flex-direction: row;
  }

  .command-item__description {
    min-width: max-content;
  }

  .command-item__hotkey {
    justify-content: flex-end;
    padding-inline-end: var(--spacing-4);
    padding-inline-start: var(--spacing-2);
  }
}

/* Info Help */

.info-target {
  position: relative;
}

.info-help {
  --_z-index: 10;
  z-index: var(--_z-index);

  position: absolute;
  left: 100%;
  bottom: 50%;
  transform: translateY(50%);

  height: 48px;
  width: 48px;

  -webkit-tap-highlight-color: transparent;
}


.info-help__button {
  position: relative;
  display: grid;
  place-items: center;

  height: 48px;
  width: 48px;

  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;

}

.info-help__button span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clr-surface-01);
  color: var(--clr-onSurface-01);
  border: 1px solid var(--clr-forSurface-01);
  transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
  line-height: 24px;
}

.info-help__button:hover span {
  background: var(--clr-surface-03);
  border: 1px solid var(--clr-forSurface-03);
  color: var(--clr-brand-300);
}

.info-help__button:focus-visible span {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.info-help__message {
  position: absolute;
  width: clamp(var(--size-33), 28ch, 100%);
  right: 0;
  bottom: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  transform: translateX(-8px) scale(0);
  transform-origin: bottom right;
  border-radius: var(--radius-2);

  background: var(--clr-surface-04);
  border: 1px solid var(--clr-forSurface-04);
  box-shadow: -6px 6px 20px var(--clr-black--50);

  color: var(--clr-onSurface-04);
  font-size: 0.875rem;

  transition: transform 300ms ease-out;
}

.info-help.active {
  z-index: calc(var(--_z-index) + 1);
}

.info-help.active .info-help__message {
  transform: translateX(-8px) scale(1);
}

.staff .section-bg {
  --section-bg: url('/assets/images/info/texture_bg.png');
  background-repeat: repeat;
  background-size: auto;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(52, 147, 101, 0.1) 0%, rgba(12, 12, 13, 0) 30%);
  }
}


.staff-wrapper {
  display: grid;
  gap: var(--spacing-4);
}

.staff-section {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
}

.staff-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1;
  padding: var(--spacing-4);
  background: var(--clr-surface-02);
  border-radius: var(--radius-2) 0 0 var(--radius-2);
  border: 1px solid var(--clr-forSurface-02);
}

.staff-info img {
  width: 40px;
  height: 40px;
}

.staff-section h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-onSurface-01--strong);
}

.staff-section[data-name='mumaster'] h3,
.staff-section[data-name='mumaster'] .staff-member {
  color: #22E7B8;
}

.staff-section[data-name='gamemaster'] h3,
.staff-section[data-name='gamemaster'] .staff-member {
  color: #3498DB;
}

.staff-section[data-name='gamemaster'] h3,
.staff-section[data-name='gamemaster'] .staff-member {
  color: #3498DB;
}

.staff-section[data-name='gamemasterleader'] h3,
.staff-section[data-name='gamemasterleader'] .staff-member {
  color: #595DDF;
}

.staff-section[data-name='subadmin'] h3,
.staff-section[data-name='subadmin'] .staff-member {
  color: #992D22;
}

.staff-section[data-name='admin'] h3,
.staff-section[data-name='admin'] .staff-member {
  color: #DB2C2C;
}


.staff-section p {
  font-size: 0.875rem;
  color: var(--clr-onSurface-02);
}

.staff-list {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--clr-surface-01);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  border: 1px solid var(--clr-forSurface-01);
}

.staff-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--clr-surface-02);
  border-radius: var(--radius-2);
  border: 1px solid var(--clr-forSurface-02);
}

.staff-member {
  font-weight: 600;
  z-index: 1;
}

.staff-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--clr-base-500);
  background: var(--clr-base-300);
  z-index: 1;
}

.staff-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--clr-base-600--50);
  background: var(--clr-base-300);
}

.staff-list li[data-status='active']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(69, 246, 132, 0), rgba(69, 246, 132, 0.1));
  border-radius: var(--radius-2);
}

.staff-list li[data-status='active'] .staff-status {
  background: rgba(69, 246, 132, 1);
  border-color: transparent;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(69, 246, 132, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(69, 246, 132, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(69, 246, 132, 0);
  }
}


@media (width >= 800px) {
  .staff-section {
    flex-direction: row;
  }

  .staff-info, .staff-list {
    padding: var(--spacing-8);
    gap: var(--spacing-4);
  }
}


.mr .section-bg {
  --section-bg: url('/assets/images/info/texture_bg.png');
  background-repeat: repeat;
  background-size: auto;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(52, 147, 101, 0.1) 0%, rgba(12, 12, 13, 0) 30%);
  }
}

.mr-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.mr-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-6);
  background: var(--clr-surface-02);
  border-radius: var(--radius-2);
  border: 1px solid var(--clr-forSurface-02);
  box-shadow: 0px 46px 13px 0px rgba(0, 0, 0, 0.01), 0px 29px 12px 0px rgba(0, 0, 0, 0.04), 0px 17px 10px 0px rgba(0, 0, 0, 0.15), 0px 7px 7px 0px rgba(0, 0, 0, 0.26), 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
}

.mr-section ul {
  margin-top: var(--spacing-4);
}

.mr-section li:not(:first-child),
.mr-section p:not(:first-child) {
  margin-top: var(--spacing-3);
}

.mr-section li {
  color: var(--clr-onSurface-02);
  line-height: 1.5rem;
  list-style: square inside;
}

.mr-section p {
  color: var(--clr-onSurface-02);
  line-height: 1.5rem;
}

.mr-section strong {
  color: var(--clr-onSurface-02--strong);
}

.mr-section li::marker {
  color: var(--clr-bronze-300);
}

@media (width >= 800px) {

  .mr-wrapper {
    gap: var(--spacing-5);
  }

  .mr-section {
    padding: var(--spacing-8);

  }
}