/* 
 * TRL Design System - Mobile Styles 
 * Mobile-specific overrides to make the UI fill the entire screen
 */
@media (max-width: 1024px) {
  :root {
    --app-menu-height: 50px;
  }

  /* Full-width styling for all page containers */
  .page-container,
  .judgment-page,
  .game-lobby,
  .game-container {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    height: 100%;
  }
  /* Make content container take up full width with no horizontal padding */
  .trl-content-container {
    padding: 0;
    max-width: 100%;
    width: 100%;
    margin-top: 0; /* No margin needed as we use padding-top on body */
    justify-content: flex-start;
    align-items: stretch;
  }

  /* Remove max-width constraints from cards */
  .trl-card,
  .game-container,
  .game-lobby {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Adjust app menu for full width */
  /* .trl-app-menu__container {
    max-width: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--app-menu-height);
  } */

  /* CSS custom property for app menu height for consistent spacing */

  /* Use flexbox layout instead of fixed padding where possible */

  /* Handle cases where direct sibling selectors are needed */
  /* .trl-app-menu__container + .trl-content-container,
  .trl-app-menu__container ~ .trl-content-container {
    margin-top: 0;
    padding-top: var(--trl-space-md);
  } */

  /* Remove border radius for full width elements */
  .trl-card,
  .game-container,
  .trl-form-container,
  .game-lobby,
  .player-list,
  .add-player-form {
    border-radius: 0;
  }

  /* Adjust padding for content elements */
  .trl-card-content,
  .trl-card-header,
  .trl-form {
    padding-left: var(--trl-space-md);
    padding-right: var(--trl-space-md);
  }

  /* Make selected video display full width */
  .selected-video-display {
    width: 100%;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Make the screen center use viewport height */
  .trl-screen-center {
    min-height: 100vh;
    height: 100%;
  }

  /* Full height body with relative positioning for fixed elements */
  body.trl-body {
    min-height: 100vh;
    height: 100%;
    margin-top: var(--app-menu-height);
    position: relative;
  }

  body.trl-logged-out {
    margin-top: 0;
  }

  /* Modal fills the screen edge-to-edge */
  .trl-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  /* YouTube search results take full width */
  .video-results-container {
    width: 100%;
    padding: 0;
  }

  /* Game-specific styles */
  .game-lobby {
    height: 100vh;
    max-height: none;
  }

  /* Fix for the sidebar on mobile */
  .trl-sidebar {
    max-width: 70%;
  }

  /* Adjust alert positioning on mobile */
  .trl-alert {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  /* Ensure video search results are full width */
  .search-results__container {
    width: 100%;
    padding: 0;
  }

  /* Fix for round displays */
  .round-display,
  .round-progress,
  .round-judgment,
  .player-round-list {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* Small tablet adjustments */
@media (max-width: 768px) {
  /* Add some padding to individual content areas */
  .round-page__content,
  .judgment-page__content {
    padding: var(--trl-space-md);
  }
}

/* iPhone-specific fixes */
@media (max-width: 428px) {
  /* Further reduce spacing on small screens */
  :root {
    --trl-space-md: 10px;
    --trl-space-lg: 16px;
  }

  /* Smaller text on tiny screens */
  .trl-card-header .trl-title {
    font-size: 20px;
  }

  /* Fix modal padding */
  .trl-modal-content {
    padding: var(--trl-space-md);
  }

  /* Allow inner elements to have some border radius */
  .player-list,
  .add-player-form,
  .leaderboard,
  .winner-card {
    border-radius: 8px;
  }

  /* Force video containers to be full width */
  .video-container,
  .youtube-player,
  .iframe-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
  }

  /* Ensure buttons can be tapped easily */
  .trl-button,
  .trl-nav-button,
  .start-game-button {
    min-height: 44px; /* Minimum tap target size for iOS */
  }
}