/* Mobile styles - importar dinamicamente */
@media (max-width: 768px) and (orientation: portrait) {
  .container {
    padding: 1rem;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
  }

  .glitch {
    font-size: 1.5rem;
  }

  .logo-underline {
    width: 100%;
  }

  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .left-column,
  .right-column {
    width: 100%;
    max-width: 100%;
  }

  .right-column {
    order: 1;
  }

  .left-column {
    order: 2;
  }

  .card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .systems-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
    gap: 0.3rem;
    justify-content: center;
  }

  .number-btn {
    width: 100%;
    min-width: 35px;
    aspect-ratio: 1;
    font-size: 0.85rem;
    padding: 0.4rem 0.2rem;
    box-sizing: border-box;
  }

  .pick-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .pick-btn {
    width: 100%;
    text-align: center;
    padding: 0.8rem 0.5rem;
    font-size: 0.85rem;
    min-height: 50px;
    white-space: nowrap;
  }

  .guarantee-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .guarantee-btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.8rem;
  }

  .system-select {
    width: 100%;
    font-size: 0.9rem;
  }

  .actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 0.9rem;
  }

  .results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .results-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-toggle,
  .btn-action {
    flex: none;
    width: 100%;
  }

  .numbers-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

    .btn-balanced {
      width: 100%;
      font-size: 0.8rem;
    }
  }

  /* Mobile horizontal */
  @media (max-width: 768px) and (orientation: landscape) {
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .numbers-grid {
      grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
      gap: 0.3rem;
    }

    .number-btn {
      font-size: 0.8rem;
      padding: 0.4rem 0.2rem;
    }

    .pick-selector {
      grid-template-columns: repeat(3, 1fr);
    }

    .left-column {
      order: 1;
    }

    .right-column {
      order: 2;
    }
  }

  /* Small mobile */
  @media (max-width: 500px) {
    .numbers-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 0.25rem;
    }

    .number-btn {
      font-size: 0.8rem;
      min-width: 32px;
      padding: 0.35rem 0.2rem;
    }

    .pick-selector {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Very small mobile */
  @media (max-width: 420px) {
    .numbers-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 0.2rem;
    }

    .number-btn {
      font-size: 0.75rem;
      min-width: 28px;
      padding: 0.3rem 0.15rem;
    }

    .pick-selector {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.4rem;
    }

    .pick-btn {
      font-size: 0.75rem;
      padding: 0.6rem 0.3rem;
      min-height: 45px;
    }
  }

  /* Ultra small mobile */
  @media (max-width: 380px) {
    .numbers-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.2rem;
    }

    .number-btn {
      font-size: 0.7rem;
      min-width: 25px;
      padding: 0.25rem 0.15rem;
    }

    .pick-selector {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }
  }