/* Extracted from fantasy(12).html, inline style #1 */
/* Mobile responsive improvements only. No scoring or Firebase logic changed. */
    html { scroll-behavior: smooth; }
    body { overflow-x: hidden; }
    input, select, button, a { touch-action: manipulation; }
    table { border-collapse: collapse; }

    @media (max-width: 768px) {
      header { position: static !important; }
      header .max-w-7xl {
        padding: 0.9rem !important;
        align-items: stretch !important;
      }
      header h1 {
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
      }
      header p { font-size: 0.7rem !important; }
      header .flex.flex-wrap.gap-2.items-center {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
      }
      #authStatus {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
        white-space: normal;
      }
      header button, header a {
        width: 100%;
        text-align: center;
        padding: 0.75rem 0.8rem !important;
      }

      main {
        padding: 0.75rem !important;
        max-width: 100% !important;
      }

      #statusBox {
        font-size: 0.78rem !important;
        padding: 0.85rem !important;
        border-radius: 1rem !important;
      }

      nav.grid {
        display: flex !important;
        overflow-x: auto;
        gap: 0.55rem !important;
        padding-bottom: 0.45rem;
        margin-bottom: 1rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      nav.grid .tabBtn {
        min-width: max-content;
        white-space: nowrap;
        padding: 0.75rem 0.9rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.8rem !important;
      }

      .tabSection > div,
      .tabSection .bg-gray-900,
      .tabSection .bg-gray-950 {
        border-radius: 1rem !important;
      }

      h2.text-3xl, h2.text-4xl {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
      }
      h3.text-2xl {
        font-size: 1.2rem !important;
      }
      .text-4xl {
        font-size: 2rem !important;
      }

      .grid,
      .grid.lg\:grid-cols-3,
      .grid.md\:grid-cols-2,
      .grid.md\:grid-cols-4,
      .grid.md\:grid-cols-6,
      .grid.xl\:grid-cols-3 {
        grid-template-columns: 1fr !important;
      }

      .lg\:col-span-2 {
        grid-column: auto !important;
      }

      .sticky {
        position: static !important;
        top: auto !important;
      }

      .p-5 { padding: 1rem !important; }
      .p-4 { padding: 0.85rem !important; }
      .gap-6 { gap: 1rem !important; }
      .gap-5 { gap: 0.9rem !important; }
      .gap-4 { gap: 0.75rem !important; }
      .gap-3 { gap: 0.6rem !important; }

      input, select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important; /* avoids iOS zoom */
      }

      #playerSearch,
      #pointsSearch,
      #formSearch,
      #positionFilter,
      #leaderboardGwFilter,
      #gwPointsFilter {
        width: 100% !important;
      }

      #playerPicker {
        grid-template-columns: 1fr !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
      }

      #myTeam .flex.flex-wrap.items-center.justify-between,
      #pickTeam .flex.flex-wrap.items-center.justify-between,
      #leaderboard .flex.flex-wrap.items-center.justify-between,
      #gwPoints .flex.flex-wrap.items-center.justify-between,
      #players .flex.flex-wrap.items-center.justify-between,
      #form .flex.flex-wrap.items-center.justify-between,
      #adminView .flex.flex-wrap.items-center.justify-between {
        align-items: stretch !important;
      }

      #myTeam .text-right {
        width: 100%;
        text-align: left !important;
        background: rgba(3, 7, 18, 0.55);
        border: 1px solid rgb(31, 41, 55);
        border-radius: 1rem;
        padding: 0.85rem;
      }

      #adminView .flex.flex-wrap.gap-2 {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
      #adminView .flex.flex-wrap.gap-2 button {
        width: 100%;
      }

      .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.9rem;
      }
      table {
        font-size: 0.82rem !important;
      }
      th, td {
        padding: 0.65rem !important;
        white-space: nowrap;
      }

      #selectionSummary .flex.justify-between,
      #myTeamView .flex.justify-between {
        gap: 0.75rem;
      }

      #myTeamView .text-right {
        text-align: right !important;
      }

      .rounded-2xl { border-radius: 1rem !important; }
      .rounded-xl { border-radius: 0.8rem !important; }
    }

    @media (max-width: 420px) {
      header .max-w-7xl {
        padding: 0.75rem !important;
      }
      header .flex.flex-wrap.gap-2.items-center {
        grid-template-columns: 1fr;
      }
      nav.grid .tabBtn {
        font-size: 0.8rem !important;
        padding: 0.7rem 0.85rem !important;
      }
      main {
        padding: 0.55rem !important;
      }
      .text-3xl, h2.text-3xl {
        font-size: 1.3rem !important;
      }
      table {
        font-size: 0.78rem !important;
      }
    }