@media (max-width: 960px) {
  .nro-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .nro-account-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .nro-account-grid--single .nro-account-profile,
  .nro-account-grid--single .nro-characters-grid > .pixel-panel {
    height: auto;
  }

  .nro-account-giftcodes {
    margin-top: 28px;
  }
}

@media (max-width: 780px) {
  .nro-giftcode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .nro-header__inner {
    flex-wrap: wrap;
  }

  .nro-nav-toggle {
    display: inline-flex;
  }

  .nro-nav {
    display: none;
    width: 100%;
    padding-top: 8px;
    border-top: 2px dashed #8a4b24;
    flex-direction: column;
    align-items: stretch;
  }

  .nro-nav.is-open {
    display: flex;
  }

  .nro-nav .pixel-btn,
  .nro-nav__user-chip {
    width: 100%;
    justify-content: center;
  }

  .nro-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nro-bars-row,
  .nro-subinfo-grid,
  .nro-server-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .nro-main {
    padding: 18px 14px 36px;
  }

  .pixel-panel {
    box-shadow:
      inset 0 3px 0 0 #fffdf2,
      inset 0 -4px 0 0 var(--nro-parchment-shadow),
      0 0 0 3px var(--nro-wood-dark),
      0 0 0 6px var(--nro-ink),
      5px 8px 0 4px rgba(22, 8, 5, 0.5);
  }

  .pixel-panel__titlebar {
    font-size: 1.05rem;
    padding: 10px 12px;
  }

  .pixel-panel__body {
    padding: 16px 14px 18px;
  }

  .nro-brand__logo {
    height: 36px;
  }

  .nro-brand__title {
    font-size: 0.9rem;
  }

  .nro-brand__sub {
    display: none;
  }

  .nro-hero__heading {
    font-size: 1.25rem;
  }

  .nro-stats-grid,
  .nro-giftcode-grid,
  .nro-reward-chips--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .nro-giftcode-card__head {
    flex-wrap: wrap;
  }
}