/* ====== Responsive (Mobile) ====== */

@media (max-width: 800px) and (orientation: portrait) {
  #scene {
    grid-template-rows: 25% 55% 20%; /* or 1fr 1fr 1fr for equal thirds */
  }

  #title-panel {
    position: sticky;
    top: 0;
    width: 95%;
    max-width: none;
    text-align: center;
    padding: 8px;
  }

  #main-logo {
    width: 60%;
  }

  #subtitle {
    font-size: calc(min(3vh, 3vw));
  }

  .panels-container {
    width: 95%;
    height: auto;
    max-width: none;
  }

  .panel p {
    font-size: calc(min(2.5vh, 2.5vw));
    margin-bottom: auto;
    margin-top: auto;
  }

  #bot {
    width: min(70vw, 840px);
    transform: translateX(-95%);
  }
}

/* Landscape fix: when phone is sideways */

@media (max-width: 1024px) and (orientation: landscape) {
  #scene {
    grid-template-rows: 25% 55% 20%; /* or 1fr 1fr 1fr for equal thirds */
  }

  #title-panel {
    position: sticky;
    top: 0;
    width: 95%;
    max-width: none;
    text-align: center;
    padding: 8px;
  }

  #main-logo {
    width: 20%;
  }

  #subtitle {
    font-size: calc(min(3vh, 3vw));
  }

  .panels-container {
    width: 95%;
    height: auto;
    max-width: none;
  }

  .panel p {
    font-size: calc(min(2.2vh, 2.2vw));
    margin-bottom: auto;
    margin-top: auto;
  }

  #bot {
    width: min(30vw, 340px);
    transform: translateX(-190%);
  }

  .contact-btn {
    font-size: calc(min(2.8vh, 2.8vw));
  }
}