@media (max-width: 950px) {
  /* Grid and panels */
  main {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 16px !important;
    overflow-x: hidden !important;
  }

  .panel {
    width: 100% !important;
    flex: unset !important;
    padding: 1rem !important;
    gap: 12px !important;
  }

  /* Headings */
  h1, h2, h3, h4, h5 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
  }

  /* Plant / emoji / images */
  .plant, img, .atom-image {
    max-width: 100% !important;
    height: auto !important;
    font-size: 80px !important;
  }

  /* Sliders, metrics, and forms */
  .sliders, .metrics, .form-group {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .slider-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  input[type=range], select, input[type=text], textarea {
    width: 100% !important;
  }

  /* Status boxes and metrics */
  .status-box, .metric, .info-box {
    font-size: 0.85rem !important;
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Buttons */
  .reset-btn, button {
    width: 100% !important;
    font-size: 1rem !important;
    padding: 10px !important;
  }

  /* Hints and text */
  .hint, p, span, label {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* Topbar adjustments */
  .topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .back {
    font-size: 0.9rem !important;
  }

  /* Tables / wide content */
  table, pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    word-break: break-word !important;
  }

  /* Badge / status containers */
  #badgeContainer, .badge, .status-container {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box;
  }

  /* Misc spacing / gaps */
  * {
    box-sizing: border-box !important;
  }
}