/* Make body and html fully responsive */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-size: 16px;
  box-sizing: border-box;
}

/* Responsive container for main content */
#app, .main-content, .sveltekit-app, .container {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

/* Ensure images and content scale correctly */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Font scaling on smaller devices */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  .verse {
    font-size: 1rem;
    line-height: 1.4;
  }

  .toolbar, .chapter-nav, .header {
    flex-wrap: wrap;
  }
  /* Force wrapped text for Dzongkha and Nepali content */
  * {
    white-space: normal !important;
    word-break: break-word;
  }
}