.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;
  min-height: 45dvh;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
  }

  & > * {
    isolation: isolate;
  }
}


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

.info-intro__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: [figure-start] auto [title-start] auto [ figure-end title-end description-start] auto[description-end];
  justify-items: center;
}


.info-intro__figure {
  object-fit: contain;
  grid-row: figure;
  grid-column: 1;
}


.info-intro__title {
  grid-row: title;
  grid-column: 1;
  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: var(--clr-white);
    font-family: var(--heading-font, Platypi);
    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 {
  margin-top: var(--spacing-6);
  grid-row: description;
  grid-column: 1;
  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% */
}

@media (width >= 60rem) {
  .info-intro__wrapper {
    grid-template-columns: auto 1fr;
    grid-template-rows: [figure-start title-start] auto [title-end description-start] auto [ description-end figure-end];
  }

  .info-intro__figure {
    grid-column: 1;
  }

  .info-intro__title {
    grid-column: 2;
    align-self: end;
  }

  .info-intro__description {
    grid-column: 2;

  }
}


/* 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-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;
}

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

/* 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;
  }
}

/* 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: 2px 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);
    }

  }
}

.vip-message {
  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-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% */
}

@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 {
  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);
}