.login-card {
  width: 100%;
  height: 100%;
  
  .title {
    text-align: center;
    margin: 70px 0 40px;
    line-height: 1.3;
  }

  .title h1 {
    font-size: 26px;
    margin: 0;
  }

  .title p {
    font-size: 22px;
    margin: 0;
  }

  .input-group {
    margin-bottom: 14px;
    width: 100%;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    padding: 0 14px;
    height: 60px;
  
    input {
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      color: inherit;
      width: 100%;
      height: 100%;
    }
    
    &.input-phone {
      display: flex;
      align-items: center;
      gap: 10px;
    
      .code {
        color: var(--text);
        font-weight: 500;
      }
    }
    &:focus-within {
      outline: none;
      border-color: var(--green);
    }
  }
  
  
  .options {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 35px;
    font-size: 14px;
  
    .options label {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted);
    }
    
    input[type="checkbox"] {
      accent-color: var(--green);
    }
  }
  
  
  button {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    background: var(--btn);
    color: #b9c0cc;
    font-size: 16px;
    cursor: not-allowed;
  }
  
  .terms {
    font-size: 13px;
    margin: 10px 0 30px;
    color: var(--muted);
  
    a {
      color: var(--green);
      text-decoration: none;
    }
  }
  
  
  .links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
  
    a {
      color: var(--green);
      text-decoration: none;
      font-size: 14px;
    }
  }
  
}


.top-bar{
    height: 20%;
    
    .winner-bar {
      background: url(../images/1762147818500.png) no-repeat center / cover;
      padding: 10px 16px;
      font-size: 13px;
    
      span {
        color: var(--yellow);
        font-weight: 700;
      }
    }
    
    .search-row {
      display: flex;
      gap: 10px;
      padding: 12px 16px;
      flex-wrap: wrap;

      .search {
        flex: 1;
        min-width: 220px;
        background: var(--dark-2);
        border-radius: 8px;
        padding: 10px 12px;
        color: var(--gray);
      }
      
      .home-btn {
        background: var(--dark-2);
        padding: 10px 14px;
        border-radius: 8px;
      }
    }
    
}

.main{
    overflow: auto;
    flex-grow: 1;

    .promo {
      margin: 16px;
      border-radius: 14px;
      background-image: url(../images/1769790060875.png);
      height: 100px;
      padding: 18px;

    }    

    .section-title {
      margin-top: 10px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 700;
    }
    
    .games {
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 10px;
      
      .game-card {
        background: #1a1f2b;
        border-radius: 14px;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        text-align: center;
        position: relative;
      }
      
      .rank {
        position: absolute;
        top: -6px;
        left: -6px;
        background: var(--main);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
}


@media (min-width: 1024px) {
  .winner-bar{
    padding: 15px 16px;
  }
  .main{
    .promo{
      height: 150px;
      margin-bottom: 10px;
    }
    .games {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 15px;
    }
  }
}