/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
  body,
  body:has(.main-nav),
  body:has(.main-nav.collapsed) {
    padding-left: 0;
    align-items: center;
  }

  body:has(.main-nav) header,
  body:has(.main-nav) main,
  body:has(.main-nav) footer,
  body:has(.main-nav) .credits-section {
    margin-left: auto;
    margin-right: auto;
  }

  .main-nav {
    position: relative;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: var(--border);
    overflow-x: visible;
    overflow-y: visible;
  }

  header,
  main {
    padding: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }
}

/* ================= RESPONSIVE TABLETTE (max-width: 768px) ================= */
@media (max-width: 768px) {
  main {
    padding: var(--spacing-md) var(--spacing-md);
  }

  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .credits-section {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* ================= RESPONSIVE MOBILE (max-width: 600px) ================= */
@media (max-width: 600px) {
  body {
    font-size: 0.95em;
    width: 100%;
    overflow-x: hidden;
    align-items: center;
  }

  header {
    padding: var(--spacing-md) var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
  }

  header h1 {
    font-size: 1.6em;
    text-align: center;
  }

  .update-info {
    text-align: center;
    font-size: 0.65em;
  }

  .main-nav {
    position: relative;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: var(--border);
    padding: var(--spacing-sm) 0;
    justify-content: center;
    margin: 0 auto;
  }

  .main-nav a,
  .main-nav span {
    flex: 1 1 45%;
    margin: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: 0.9em;
    text-align: center;
  }

  main {
    max-width: 100% !important;
    padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xl)
      var(--spacing-xs);
    width: 100%;
    box-sizing: border-box;
  }

  .image-gallery {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    width: 100%;
  }

  .image-center img {
    width: 100%;
    height: auto;
  }

  .demolition-navigation {
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
  }

  .nav-button {
    width: 100%;
    text-align: center;
    padding: var(--spacing-sm) 0;
  }

  .comments-section {
    padding: var(--spacing-sm);
    margin: var(--spacing-xxl) var(--spacing-sm);
  }

  .comment-form input,
  .comment-form textarea,
  .comment-form button {
    width: 100%;
  }

  .comment-form button {
    padding: var(--spacing-sm) 0;
  }

  .changelog table,
  .changelog th,
  .changelog td {
    display: block;
    width: 100%;
  }

  .changelog th {
    text-align: left;
    margin-bottom: var(--spacing-sm);
  }

  .changelog td {
    margin-bottom: var(--spacing-md);
  }

  .copyright {
    text-align: center;
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xxl);
  }
}